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

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（）和.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);
});