Question

我有以下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>

Answer 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);
    }
});

在单击检查全部或任何单行检查时切换突出显示
取消选中任何一行未选中时检查所有
适用于任意行数

Answer 2

更改

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

到

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

作品。

jsFiddle

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

2 个答案: