jQuery - 2つの異なるテーブルのすべてのチェックボックスをオフ/チェックボックス

Question

私のASP.NET MVC 5アプリケーションのビューでは、2つのテーブルがあり、テーブルの各行には動的に生成されるチェックボックスがあります。

両方のテーブルにすべてチェック/すべてチェック解除機能を追加しようとしています。

<table class="table" id="hostsTable"> 
         <thead> 
          <tr> 
           <th>FQ</th> 
           <th>Name</th> 
           <th>Select?</th> 
          </tr> 
         </thead> 
          <tr> 
           <td> 
            VISIBLE FQ VALUE 

           </td> 
           <td> 
            VISIBLE NAME 
           </td> 
           <td> 
            <input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" /> 
           </td> 
          </tr> 


        </table> 

テーブルの両方の構造は同じであり、第二の1のIDが countersTableです後、私のjQuery：関連するHTMLコードを次に示し

<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select/Unselect All</b> 

<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select/Unselect All</b> 

：後

は

2つのチェックボックスです：

$('.CheckAll').on('change', function() { 
     $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked); 
    }); 
    //$('table tr input:checkbox:not(".CheckAll")').on('change', function() { 
    $('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function() { 

     if (!this.checked) { 
      $(this).parent().parent().find('.CheckAll').prop('checked', false); 
     } 
     var flag = true; 
     $(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function() { 
      if (!this.checked) { 
       flag = false; 
      } 
     }); 
     if (flag) { 
      $(this).parent().parent().find('.CheckAll').prop('checked', true); 
     } 
    }); 


    $('.CheckAllt2').on('change', function() { 
     $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked); 
    }); 
    //$('table tr input:checkbox:not(".CheckAll")').on('change', function() { 
    $('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function() { 

     if (!this.checked) { 
      $(this).parent().parent().find('.CheckAllt2').prop('checked', false); 
     } 
     var flag = true; 
     $(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function() { 
      if (!this.checked) { 
       flag = false; 
      } 
     }); 
     if (flag) { 
      $(this).parent().parent().find('.CheckAllt2').prop('checked', true); 
     } 
    }); 

Selec t/Unselect Allチェックボックスをオンにすると、両方のテーブルのチェックボックスにChecked/Uncheckedが表示されます。

どのようにこれをそれぞれのテーブルに制限できますか？

おかげでアドバンス

Answer 1

で、私は$.parent().parent()を呼び出すときに間違った要素を選択することを前提としています。両方のテーブルが子要素である要素を取得する場合は、明らかにすべてinput[type="checkbox"]が選択されます。

両方のチェックボックスに異なるクラスがあるので、$.parent().parent()を選択するのではなく、関連テーブルの# idセレクタを使用してください。

I.e.最初のテーブルの

$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked); 

$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked); 

に、2つ目のため #counterTableとこれを変更します。