jquery - 当所有项目都未选中时，如何取消选中 "select all"复选框？

Question

我正在尝试选择所有复选框，但遇到了一些问题。

当所有项目都未选中时，如何取消选中“全选”复选框？

这是我尝试过的代码。

<input id="select-all" type="checkbox" name="select-all-cam">
<span class="txt-label">Select All</span>

<div class="list">
    <ul>
        <li>
            <input id="cam-1" type="checkbox" name="select-cam">
            <label for="cam-1">item1</label>
        </li>
        <li>
            <input id="cam-2" type="checkbox" name="select-cam">
            <label for="cam-2">item2</label>
        </li>

    </ul>
</div>

$('#select-all').click(function(event) {
    if (this.checked) {
        $('.list input[type="checkbox"]').each(function() {
            this.checked = true;
        });
    } else {
        $('.list input[type="checkbox"]').each(function() {
            this.checked = false;
        });
    }
});

演示:https://fiddle.jshell.net/0j19t3g5/

Answer 1

您可以向 .list 中的复选框元素添加一个 change 事件监听器，并确定选中的复选框数量是否与总数相同。

Updated Example

$('.list input[type="checkbox"]').on('change', function () {
  var allChecked = $('.list input:checked').length === $('.list input').length;
  $('#select-all').prop('checked', allChecked);
});

这种方法的好处是，如果选中所有其他复选框，则选中“全选”复选框；同样，如果取消选中其中一个复选框，则不会选中“全选”复选框。

我还将 click 事件监听器更改为 change 事件监听器。您还可以将初始事件监听器缩短为以下内容:

$('#select-all').on('change', function() {
  $('.list input[type="checkbox"]').prop('checked', this.checked);
});