javascript - 单击单个复选框时选择表中的所有复选框

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>

可重用且松散耦合。