javascript - JSFiddle のグループ チェックボックス: Part2

Question

JSFiddle のグループ チェックボックス: パート 1

パート 1 の Global Checkbox for All Check/Uncheck を解決した後。他にも解決すべき問題がいくつかあります。

1. リストからアイテムのチェックを外した場合。自動的にグローバル (すべてチェック) をオフにする必要があります。

2. すべての項目を個別に確認した場合。自動的にグローバル (すべてチェック) をチェックする必要があります。このような。

コード

 <fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" ID="checkall1"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox" ID="checkall2"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

JS

   $('[id^=checkall]').click(function(){
    $(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});

JSFiddle

Answer 1

現在のグループのすべてのチェックボックスがチェックされているかどうかを確認するコールバックを登録します

$('input[id^=checkall]').click(function(){
    $(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});

$(':checkbox').not('[id^=checkall]').click(function(){
    var all = $(this).closest('fieldset').find('[id^=checkall]');
    var chks = $(this).closest('fieldset').find('input').not(all);

    all.prop('checked', chks.length == chks.filter(':checked').length);
})

デモ:フィドル