Question

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

如何取消选中＆＃34;选择所有＆＃34;所有项目未选中时复选框？

这就是我尝试过的代码。

<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);
});

这种方法的好处是“选择所有”＆＃39;如果选中了所有其他复选框，则会选中复选框，如果未选中其中一个复选框，则会取消选中该复选框。

我还将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);   
      }
    });

Answer 4

如果未选中其中一个

，代码将取消选中

$('#select-all').click(function(event) {   
    var _this = this;  
    $('.list input[type="checkbox"]').prop('checked', _this.checked); }); 
    $('.list input[type="checkbox"]').on('change', function() {
      $('#select-all').prop("checked", this.checked);
      var allChecked = $('input[type="checkbox"]').reduce(function(input1, input2) { 
                       return input1 && input2;   
                      }, true);
      if(allChecked) {
        $('#select-all').prop("checked", false);   
      } 
   });

如何取消选中＆＃34;选择所有＆＃34;所有项目未选中时复选框？

4 个答案: