javascript - HTML 行表选择

Question

我有一个表，其中第一列是一个选择当前行的复选框，标题有一个 SelectAll 复选框。当用户单击该行(复选框变为选中状态)时，该表也会被选中。

我的问题是，当我进行全选时，所有复选框都被选中，但行也没有被选中。

我的复选框有更改功能，所以我假设当我点击全选时，更改方法也会执行，但这并没有发生。

$(document).ready(function() {

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      });
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      });
    }
  });

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

JS Fiddle here

Answer 1

您可以通过在点击事件中触发更改事件来解决此问题:

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });

$(document).ready(function() {

  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>