CheckBox 选中时突出显示表格数据，未选中时取消突出显示答案

【问题标题】：Hilight table data when CheckBox is checked and unhilight when uncheckedCheckBox 选中时突出显示表格数据，未选中时取消突出显示
【发布时间】：2010-09-17 12:42:13
【问题描述】：

我在表格中有以下复选框列表。我想在选中复选框时突出显示<td>，并在未选中复选框时取消突出显示。我知道我需要在选中复选框时将类添加到 <td> 并在未选中时删除类。

<table id="cbDepartment">
    <tbody><tr>
        <td><input type="checkbox"  name="cbDepartment0" id="cbDepartment_0"><label for="cbDepartment_0">Check Box 1</label></td>
        <td><input type="checkbox"  name="cbDepartment1" id="cbDepartment_1"><label for="cbDepartment_1">Check Box 2</label></td>
        <td><input type="checkbox"  name="cbDepartment2" id="cbDepartment_2"><label for="cbDepartment_2">Check Box 3</label></td>
    </tr><tr>
        <td><input type="checkbox"  name="cbDepartment3" id="cbDepartment_3"><label for="cbDepartment_3">Check Box 4</label></td>
        <td><input type="checkbox"  name="cbDepartment4" id="cbDepartment_4"><label for="cbDepartment_4">Check Box 5</label></td>
        <td><input type="checkbox"  name="cbDepartment5" id="cbDepartment_5"><label for="cbDepartment_5">Check Box 6</label></td>
    </tr><tr>
        <td><input type="checkbox"  name="cbDepartment6" id="cbDepartment_6"><label for="cbDepartment_6">Check Box 7</label></td>
        <td><input type="checkbox"  name="cbDepartment7" id="cbDepartment_7"><label for="cbDepartment_7">Check Box 8</label></td>
        <td><input type="checkbox"  name="cbDepartment8" id="cbDepartment_8"><label for="cbDepartment_8">Check Box 9</label></td>
    </tr>
</tbody>
</table>

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

这是一种方法：

jQuery(function() {
  $('#cbDepartment :checkbox').click(function() {
    var cell = $(this).closest('td');

    if ($(this).is(':checked')) {
      cell.addClass('check');
    }
    else {
      cell.removeClass('check');
    }
  });
});

现场示例：http://www.jsfiddle.net/VTSXz/2/

【讨论】：