選中/取消選中所有複選框

Question

我已經看到很多檢查/取消選中所有複選框腳本。但是絕大多數人並不尊重，如果我使用「全選」選項切換所有複選框，然後取消選中列表中的單個複選框，則「檢查全部」複選框仍會被選中。

有沒有處理這種情況的優雅方式？

Answer 1

$('#checkAll').click(function() { 
    if(this.checked) { 
     $('input:checkbox').attr('checked', true); 
    } 
    else { 
     $('input:checkbox').removeAttr('checked'); 
    } 
}); 

$('input:checkbox:not(#checkAll)').click(function() { 
    if(!this.checked) { 
     $('#checkAll').removeAttr('checked'); 
    } 
    else { 
     var numChecked = $('input:checkbox:checked:not(#checkAll)').length; 
     var numTotal = $('input:checkbox:not(#checkAll)').length; 
     if(numTotal == numChecked) { 
      $('#checkAll').attr('checked', true); 
     } 
    } 
}); 

演示：http://jsfiddle.net/ThiefMaster/HuM4Q/

如問題的評論中指出，經常複選框不可爲這個完美的。我的執行禁用「檢查全部」框一個複選框未選中。因此，要取消選中所有仍然選中的複選框，您必須點擊兩次（首先重新選中未選中的複選框，然後取消選中所有其他選項）。 但是，對於三態複選框，這可能仍然是必要的，因爲狀態順序可能未被選中 - >無限期 - >選中 - >未選中，因此您需要兩次點擊才能從無限期進入未選中狀態。

---

既然你可能不希望檢查所有複選框在網頁上以「全選」，以取代例如 .autoCheckBox或input.autoCheckBox:checkbox並給予那些複選框class="autoCheckBox"。

如果你想要某種形式內的所有複選框，簡單的使用#idOfYourForm input:checkbox或form[name=nameOfYourForm] input:checkbox

Answer 2

也許是這樣的：

$('tbody input:checkbox').change(function(){ 
    if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) { 
     $('#checkAll')[0].checked = false; 
    } 
}); 

這假定#checkAll是表中的thead部分。

Answer 3

您可以通過將點擊處理程序附加到每個目標複選框來實現此目的，並讓該處理程序根據這些目標複選框的集體狀態取消選中「控件」複選框。所以，這樣的事情：

// Control checks/unchecks targets 
$('#controlcheckbox').click(function(){ 
    $('.targetcheckboxes').attr('checked', this.checked); 
}); 

// Targets affect control 
$('.targetcheckboxes').click(function(){ 
    if($('.targetcheckboxes:not(:checked)').length){ 
    $('#controlcheckbox').attr('checked',false); 
    } 
}); 

更妙的是 - 你可以這樣的邏輯連接到一個封閉的容器元素，並觀察事件中使用.delegate()：

$('#some_container').delegate('.targetcheckboxes','click',function(){...}); 

Answer 4

$("#selectall").click(function(){ 
    var checked = $("#selectall").attr("checked"); 
    $(".selectone").attr("checked",checked); 
}); 

對於設置全選

$(".selectone").click(function(){ 
    var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get(); 
    var flg = true; 
    if(jQuery.inArray(false, net)){ 
    flg= false; 
    } 
    $("#selectall").attr("checked",flg); 
});