すべてのチェックボックスをオン/オフにします。

Question

多くのチェック/チェックボックスをすべてオフにしました。しかし、「チェックオール」チェックボックスを使ってすべてのチェックボックスをトグルして、リスト内のチェックボックスを1つもオフにすると、チェックされているすべてのチェックボックスがチェックされています。

このケースをうまく処理する方法はありますか？

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/質問のコメントで指摘したように

、定期的なチェックボックスは、このために完全ではありません。私の実装では、の1つのチェックボックスのチェックが外されると、すぐに「すべてをチェック」ボックスが無効になります。したがって、まだチェックされていないチェックボックスをすべてオフにするには、チェックボックスを2回クリックする必要があります（チェックされていないチェックボックスをもう一度チェックし、他のチェックボックスをすべてオフにします）。 しかし、トライステートのチェックボックスを使用すると、状態の順序が未チェック - >不定 - >チェック - >チェックされていない可能性があるため、まだ必要な場合があります。あなたはおそらく、「すべてをチェック」を使用して、ページ上のすべてのチェックボックスをチェックし、例えばとを交換したくないので

---

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