모든 체크 박스를 체크/체크하지 않음

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/ 질문의 의견에서 지적

, 정기적으로 체크 박스는 이에 대한 완벽하지 않습니다. 구현에 따라 하나의 체크 박스가 선택 취소되면 "모두 선택"상자가 비활성화됩니다. 따라서 모든 체크 된 체크 박스의 체크를 해제하려면 두 번 클릭해야합니다 (체크되지 않은 체크 박스를 다시 체크하고 다른 체크 박스는 모두 체크 해제하십시오). 그러나 3 상태 확인란을 사용하면 상태 순서가 선택 취소 -> 무기한 -> 선택 -> 선택 취소되어있을 수 있으므로 아직 필요하지 않을 수 있습니다. 따라서 무기한에서 두 번 클릭하여 선택을 취소해야합니다. 당신은 아마 "모두 선택"하여 페이지의 모든 확인란을 선택 예와 를 교체하지 않기 때문에

---

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