當單擊一個複選框時選中表格中的所有複選框

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>

可重複使用的，鬆散耦合。