如何在所有項目未選中時取消勾選「全選」複選框？

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

的好處這種方法是，如果所有其他複選框被選中的「全選」複選框被選中，並且同樣不被選中，如果他們中的一個沒有被選中。

我也改變了click事件監聽到change事件偵聽器。您也可以縮短你的初始事件偵聽器以下幾點：

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

Answer 2

試試這個代碼

$('.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 3

添加該代碼了。

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