Chọn/Bỏ chọn tất cả các hộp kiểm

Question

Tôi đã thấy nhiều kiểm tra/bỏ chọn tất cả tập lệnh hộp kiểm. Nhưng hầu hết không tôn trọng rằng nếu tôi bật tất cả các hộp kiểm bằng cách sử dụng hộp kiểm "chọn tất cả" và sau đó bỏ chọn một hộp kiểm duy nhất trong danh sách, hộp kiểm "đã chọn tất cả" vẫn được chọn.

Có cách nào thanh lịch để xử lý trường hợp này không?

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

Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/

Như đã chỉ ra trong bình luận của câu hỏi, một hộp kiểm thường xuyên không phải là hoàn hảo cho việc này. Triển khai của tôi tắt hộp "chọn tất cả" ngay sau khi hộp kiểm một không được chọn. Vì vậy, để bỏ chọn tất cả các hộp kiểm vẫn được chọn, bạn sẽ phải bấm hai lần (trước tiên hãy kiểm tra lại các ô đã bỏ chọn và sau đó bỏ chọn tất cả các hộp kiểm khác). Tuy nhiên, với hộp kiểm tri-state, điều này có thể vẫn còn cần thiết vì thứ tự trạng thái có thể được bỏ chọn-> indefinite-> checked-> unchecked, vì vậy bạn cần hai lần nhấp chuột đến từ không xác định để bỏ chọn.

---

Kể từ khi có thể bạn không muốn kiểm tra tất cả hộp kiểm tra trên trang của bạn với "Check All", thay thế với ví dụ .autoCheckBox hoặc input.autoCheckBox:checkbox và cung cấp các hộp kiểm đó class="autoCheckBox".

Nếu bạn muốn tất cả hộp kiểm bên trong một hình thức nhất định, sử dụng đơn giản #idOfYourForm input:checkbox hoặc form[name=nameOfYourForm] input:checkbox

Answer 2

Có lẽ một cái gì đó như thế này:

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

này giả định rằng #checkAll là trong phần thead bảng.

Answer 3

Bạn có thể thực hiện điều này bằng cách gắn trình xử lý nhấp chuột vào từng hộp kiểm mục tiêu và có trình xử lý đó bỏ chọn hộp kiểm "điều khiển" dựa trên trạng thái tập thể của các hộp kiểm mục tiêu đó. Vì vậy, một cái gì đó như thế này:

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

Thậm chí tốt hơn - bạn có thể đính kèm logic này đến một yếu tố container kèm theo, và xem cho sự kiện này sử dụng .delegate():

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

Answer 4

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

Đối với thiết chọn tất cả

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