選中復選框組中的至少一個復選框

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);
});