1つのチェックボックスをクリックしたときにテーブル内のすべてのチェックボックスを選択

Question

行の最初の列のチェックボックスをクリックすると、テーブル行にデータが移入されるテーブルがあります。その部分は正しく動作しています。 [すべて選択]チェックボックスが付いたヘッダー列があります。このチェックボックスをオンにすると、すべての行にデータが入力され、対応するチェックボックスが選択されます。これはIEでは正常に動作していますが、ChromeとFirefoxではデータが入力されていますが、チェックボックスは選択されていません。何か案は？

$('.selectAll input[type="checkbox"]').change(function() { 

    var thistable = $(this).parents('table'); 
    if (this.checked) { 

     populateOptions(thistable); 
     thistable.find('.hiddenUntilOrder').addClass('showItems'); 
     thistable.find('tr').each(function() { 
      $(this).find('.distribution').rules("add", { required: true, messages: { required: "" } }); 
     }); 
     thistable.find('.checkbox').prop("checked", true); 

    } else { 
     thistable.find('.hiddenUntilOrder').removeClass('showItems').rules("remove"); 
     thistable.find('tr').each(function() { 
      $(this).find('.distribution').rules("remove"); 
     }); 
     thistable.find('.checkbox').prop("checked", false); 
    } 
}); 

Answer 1

を読んでください。

$('.js-selectall').on('change', function() { 
 
    var isChecked = $(this).prop("checked"); 
 
    var selector = $(this).data('target'); 
 
    $(selector).prop("checked", isChecked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" class="js-selectall" data-target=".js-selectall1" /> 
 

 
<table> 
 
    <tr> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    <td><input type="checkbox" class="js-selectall1" /> </td> 
 
    </tr> 
 
</table>

再利用可能と疎結合。