Отметьте все, чтобы выделить все строки в таблице

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