jquery - 如何使用 jQuery 切换主复选框的状态

Question

我有一个复选框列表，这些复选框全部由“主”复选框打开/关闭。我正在使用 jQuery 来做到这一点并且效果很好。

我想要完成的是每当列表中的任何复选框未选中时关闭“主”复选框。同样，如果所有复选框都被“选中”，我希望也选中“主”复选框。这样，主复选框不仅是打开/关闭所有复选框的一种方式，而且还是所有复选框是否都被选中的指示器。

这是我当前的代码，用于切换复选框......

<input id="MasterCheckbox" type="checkbox" onclick="toggleChecked(this.checked)" />

<input id="checkbox1" type="checkbox" class="checkboxlistitem" />
<input id="checkbox2" type="checkbox" class="checkboxlistitem" />
<input id="checkbox3" type="checkbox" class="checkboxlistitem" />

jQuery 函数

function toggleChecked(status) {
  $(".checkboxlistitem").each(function () {
    $(this).attr("checked", status);
  })
}

关于如何让主复选框根据其控制的复选框列表的状态进行切换有什么建议吗？哎呀!这是一个复选框绕口令。

Answer 1

$("#MasterCheckbox").change(function() {
    $(".checkboxlistitem").attr("checked", this.checked);
});

$(".checkboxlistitem").change(function() {
    $("#MasterCheckbox").attr("checked", $(".checkboxlistitem:checked").length == $(".checkboxlistitem").length);
});

You can try it here.