Question

如果选中了all all复选框，我试图在我的tr行中添加一个类，但我似乎无法使add类工作（如果已取消选中all all，则显然会删除它们），我正在使用切换每个单独的行来添加/删除该类，但似乎无法使其适用于所有检查。

这是我的表：

<form>
<table cellspacing="0" cellpadding="0" class="tablesorter" id="table">
  <thead>
    <tr>
      <th valign="middle" align="left" class="filebox"><input type="checkbox" id="checkall" name="checkall"></th>
      <th valign="middle" align="left" class="header filename"><strong>Filename</strong></th>
      <th valign="middle" align="left" class="header filesize"><strong>Size</strong></th>
      <th valign="middle" align="left" class="header filedate"><strong>Date</strong></th>
    </tr>
  </thead>
  <tbody class="file">
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td>
      <td valign="middle" align="left" class="filename">Search48.png</td>
      <td valign="middle" align="left" class="filesize">6 KB</td>
      <td valign="middle" align="left" class="filedate">21/10/2010</td>
    </tr>
    <tr>
      <td valign="middle" align="left" class="filebox"><input type="checkbox" id="checkbox" name="checkbox"></td>
      <td valign="middle" align="left" class="filename">shopping_trolley48.png</td>
      <td valign="middle" align="left" class="filesize">3 KB</td>
      <td valign="middle" align="left" class="filedate">21/10/2010</td>
    </tr>
  </tbody>
</table>
</form>

这是我的jquery代码：

//check all checkboxes
$("#checkall").click(function () {
  $(this).parents("#table:eq(0)").find(":checkbox").attr("checked", this.checked);
});

//add highlight to tr
$("#checkbox").click(function() {
  $(this).parent().parent().toggleClass("highlight");
});

Answer 1

你不能在这里使用ID，因为它被重复，而是使用像class="checkbox"这样的类而不是id="checkbox"，如下所示：

$("#checkall").change(function () {
  $(this).closest("table").find(":checkbox").attr("checked", this.checked).change();
});

$(".checkbox").change(function() {
  $(this).closest('tr').toggleClass("highlight", this.checked);
});

You can test it out here。另请注意使用change代替click，因此状态正确，使用closest()获取该选择器的最近父级，并在所有选项上调用.change()您正在更改的复选框，因此它们的行类会正确更新。

Answer 2

http://beckelman.net/2008/11/18/select-all-checkboxes-in-a-table-column-with-and-without-jquery-plugin-demo/

<script type="text/javascript">
$(document).ready(function() {
    $("#tableOne thead tr th:first input:checkbox").click(function() {
        var checkedStatus = this.checked;
        $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
            this.checked = checkedStatus;
        });
    });

});
</script>

jquery检查所有复选框并将类添加到行？

2 个答案: