Question

我在标签中有一组复选框，如此

<div class="constraints">
<label>
    <label>
        <input type="checkbox" ...>
    </label>
    .
    .
    .
    <label>
        <input type="checkbox" ...>
    </label>
</label>
.
.
.
<label>
    <label>
        <input type="checkbox" ...>
    </label>
    .
    .
    .
    <label>
        <input type="checkbox" ...>
    </label>
</label>
</div>

在每组标签（.constraints > label）中，必须至少选中一个复选框。为了确保这一点，我编写了这个jQuery代码，如果所有这些代码都未选中，它应该只是勾选组中的第一个框。

$('form .constraints input').on('change', function() {
    var checks = $(this).closest('.constraints > label').find('input') ;

    var atleastone = false ;

    checks.each(function() {
        if ($(this).is(':checked')) {
            atleastone = true ;
        }
    }) ;

    if (!atleastone) {
        checks.first().attr('checked', true) ;
    }
}) ;

一次只能使用一次。我第一次检查或取消选中任何框时，脚本可以正常工作，但任何后续调用都不会产生任何结果。

出了什么问题？

Answer 1

你需要改变你拥有的每个地方

.attr('checked')
.attr('checked', true)

到

.prop('checked')
.prop('checked', true)

要了解原因，您可以查看.prop() vs .attr()

您可以通过

来缩短代码

$('form .constraints input').on('change', function() {
  var checks = $(this).closest('.constraints > label').find('input');
  var checked = checks.filter(':checked').length == 0;
  if (checked) checks.first().prop('checked', checked);
});

选中复选框组中的至少一个复选框

1 个答案: