选中全部以突出显示表中的所有行答案

【问题标题】：Check all to highlight all rows in a table选中全部以突出显示表中的所有行
【发布时间】：2011-03-31 01:45:25
【问题描述】：

我有以下 HTML/jQuery 代码，其中我的 CheckAll 进程框工作正常，但同时。当单击此 CheckAll 复选框时，我还想突出显示表中的所有行，显然取消选中 CheckAll 框时取消突出显示。

不幸的是，我似乎无法继续。我做错了什么？

<tr>
<th id=" " class="t12subheader">
<input id="checkAll" type="checkbox">
</th>
</tr>

<tr>
  <td class="t12datavalue" align="center" style=""><input type="checkbox" value="123" name="f01"></td>
  <td class="t12datavalue" style="">123</td>
  <td class="t12datavalue" style="">333</td>
  <td class="t12datavalue" style="">Alex</td>
  <td class="t12datavalue" style="">Smith</td>
</tr>


<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $("#checkAll").click(function() {
      $("input[name='f01']").attr('checked', 
                                $('#checkAll').is(':checked'));
      $(this).closest('tr').toggleClass('highlight');
    }); 

 }); 
</script>

【问题讨论】：

标签： jquery html checkbox

【解决方案1】：

具有额外功能的更新解决方案

$("#checkAll").click(function() {
    var self = $(this);
    if (self.attr('checked')) {
        self.closest('tr').nextAll().addClass('highlight').find(':checkbox').attr('checked', true);
    }
    else {
        self.closest('tr').nextAll().removeClass('highlight').find(':checkbox').attr('checked', false);
    }
});

$("table :checkbox").not("#checkAll").click(function() {
    var self = $(this);
    var checked = self.attr('checked');
    self.closest('tr').toggleClass('highlight');
    if (!checked) {
        $("#checkAll").attr('checked', false);
    }
});

当单击检查全部或任何单行检查时切换突出显示
只要取消选中任何单行，就取消选中全部检查
适用于任意数量的行

【讨论】：

感谢您。这似乎可行，但我似乎存在一个问题，当您执行全选然后单独取消选中下面的记录，然后取消选中全选复选框时，您取消选中的单个记录随后会突出显示。反正有这个吗？

【解决方案2】：

变化

$(this).closest('tr').toggleClass('highlight');

到

$(this).closest('tr').nextAll().toggleClass('highlight');

有效。

jsFiddle

【讨论】：

似乎只突出了第一行，而不是其余的行 - 有什么想法吗？谢谢。
@tonsils 我将 next() 更改为 nextAll()。现在它应该可以工作了。jsFiddle