如果取消选中所有项目,如何取消选中"全选"复选框？

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

您可以change向复选框元素添加事件侦听器,.list并确定已选中复选框的数量是否与总数相同.

更新的示例

$('.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);
});