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

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

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

2011-01-26 janhartmann

從UI的角度來看，你可能想要一個[三狀態複選框]（http://stackoverflow.com/questions/17260） 96/tri-state-check-box-in-html），這樣你就可以將某種情況下的情況顯示爲其他內容。但是你必須用HTML來僞造這些，或者至少<5。我以前使用過一個很好的實現，但它不是這個問題的答案之一 - 不記得它在哪裏。 [在那裏的第一個例子]（http://shamsmi.blogspot.com/2008/12/tri-state-checkbox-using-javascript.html）可以做到這一點，雖然不是在jQuery中，並使用單獨的圖像爲每個國家而不是一個+ CSS。 – Rup 2011-01-26 13:35:38

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

來源

2011-01-26 13:30:23 ThiefMaster

也許是這樣的：

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

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

來源

2011-01-26 13:31:33 lonesomeday

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

// 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(){...});

來源

2011-01-26 13:31:54

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

來源

2011-01-26 13:56:56 Harish

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

回答

相關問題