当单击一个复选框时选中表格中的所有复选框

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

花一点时间，并阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton。

$('.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>

可重复使用的，松散耦合。