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

我试图选择所有复选框,我遇到了一些问题.

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

这就是我试过的代码.

Select All


    

        

            
            item1
        
        

            
            item2
        

    


$('#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/

您可以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);
});