2回目にすべてのテーブル行を確認できません

Question

私はいくつかのデータを表示するHTMLテーブルを持っています。私は複数の選択をしようとするときに問題があります。

<th>（すべての行が選択されています）のチェックボックスをクリックすると、tbody > trのすべてのチェックボックスが選択されています。もう一度クリックすると、すべてが選択解除されます。 thチェックボックスをもう一度クリックすると、tbody内の何も選択されません。この問題を解決するにはどうすればよいですか？

$(document).ready(function() { 
 
    toggleDeleteButton = function() { 
 
    // alert($('.selector:checked').length); 
 

 
    if ($('.selector:checked').length) { 
 
     $('.btn-delete-selected').removeClass('disabled'); 
 
    } else { 
 
     $('.btn-delete-selected').addClass('disabled'); 
 
    } 
 
    } 
 
    
 
    function update_selection(obj) { 
 
    var state = obj.checked; 
 
    if (state === undefined) { 
 
     state = false; 
 
    } 
 
    $(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th class=""><input onchange="update_selection(this); toggleDeleteButton();" type="checkbox"></th> // Selecting all 
 
     <th class=""> 
 
     <a href="#">#</a> 
 
     </th> 
 
     <th class=""> 
 
     <a href="#">Data #1</a> 
 
     </th> 
 
     <th class=""> 
 
     <a href="#">Data #2</a> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">3</td> 
 
     <td class="text-right">£ 1.00</td> 
 
     <td class="center">Foo</td> 
 
    </tr> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">4</td> 
 
     <td class="text-right">£ 2.50</td> 
 
     <td class="center">FooBar</td> 
 
    </tr> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">5</td> 
 
     <td class="text-right">£ 3.00</td> 
 
     <td class="center">Bar</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

、それが正常に動作する必要があります。

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').prop('checked', state); 

へ

$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state); 

Answer 2

あなたが持っている最大の問題は、あなたがon*イベント属性を使用していることです。古いものとは別に、この機能を使用するには、windowの範囲内で使用可能にする必要があります。機能しないdocument.readyハンドラ内で関数を定義しているので。

コードを改善して問題を解決するには、on*属性を削除し、控えめなJSを使用してイベントを添付します。あなたもこのように、prop()とtoggleClass()を使用してロジックを簡素化することができます：あなたは（支えるためにATTR（）を変更した場合）

$(document).ready(function() { 
 
    $('th :checkbox').change(function() { 
 
    $('.selector').prop('checked', this.checked); 
 
    $('.btn-delete-selected').prop('disabled', this.checked).toggleClass('disabled', this.checked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th class=""><input type="checkbox"></th> 
 
     <th class=""> 
 
     <a href="#">#</a> 
 
     </th> 
 
     <th class=""> 
 
     <a href="#">Data #1</a> 
 
     </th> 
 
     <th class=""> 
 
     <a href="#">Data #2</a> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">3</td> 
 
     <td class="text-right">£ 1.00</td> 
 
     <td class="center">Foo</td> 
 
    </tr> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">4</td> 
 
     <td class="text-right">£ 2.50</td> 
 
     <td class="center">FooBar</td> 
 
    </tr> 
 
    <tr class="tr even incomplete "> 
 
     <td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td> 
 
     <td class="center">5</td> 
 
     <td class="text-right">£ 3.00</td> 
 
     <td class="center">Bar</td> 
 
    </tr> 
 
    </tbody> 
 
</table>