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

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中的复选框元素中，并确定复选框的数量是否与总数相同。

Updated Example

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

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

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

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

Answer 2

也添加了这段代码.

 $(".list input[type=checkbox]").change(function(event){
              var checked_count = $(".list input[type=checkbox]:checked").length;
              var max_checks = $(".list input[type=checkbox]").length;;
              if(checked_count==max_checks){
                $('#select-all').prop("checked",true);
              }else{
                $('#select-all').prop("checked",false);
              }
    });

Answer 3

试试这段代码

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