Jquery 如果选中复选框，则更改tr的类别

我有一个表，其中有如下行：

<tr>
    <td><input type="checkbox" /></td>
    <td><a href="#">School</a></td>
    <td><a href="#">DD1 1AB</a></td>
    <td>80.10</td>
    <td>200</td>
    <td><span class="active">Active</span></td>
    <td><a href="#">John Doe</a><br/>00000 000000</td>
</tr>

80.10
200
活跃的

00000000000

我想做的是，当用户选中复选框时，将父级的类更改为selected，这样用户就知道他们选择了哪一行。注意：他们可以打开和关闭这些

$('table').delegate(':checkbox','change',function(){
  var $elem = $(this),
  $tr = $elem.closest('tr');

  if($elem.is(':checked')){
    $tr.addClass('highlight');
  }else{
    $tr.removeClass('highlight');
  }
  return false;

})

---

我希望这能帮助您

假设一些复选框可能是预先检查的，我会采取以下方法：

// First add class for pre-checked entries
$(".xyz input[type=checkbox]:checked").each(function() {
    $(this).closest("tr").addClass("selected");
});

// Then toggle class whenever checkbox state changes
$(".xyz input[type=checkbox]").live("change", function() {
    $(this).closest("tr").toggleClass("selected");
});

现场演示：

为了减少两次搜索DOM的开销，可以将其组合为：

$(".xyz input[type=checkbox]").live("change", function() {
    $(this).closest("tr").toggleClass("selected");
}).filter(":checked").each(function() {
    $(this).closest("tr").addClass("selected");
});

---

它的作用是一样的：

请停止在所有问题标题的开头写“jQuery:”。我们已经有了标签系统，你试过什么了？这是一个问答网站，不是一个招聘会议场所的程序员。$（这个）。检查不起作用$（this.prop（'checked'）将，或者this.checked将$（这是jQuery包装的DOM元素对象。

.closest（“tr”）

比

.parent（）.parent（）更健壮。它也更容易阅读。是的，但这比检查其节点名更快，最近的搜索下一个元素，它看起来像父节点和子节点，下一个元素，这是直接到父（）的好观点。性能和可维护性之间的平衡可能很棘手，而且总是存在以牺牲可维护性为代价的过早优化问题。如果checkbox的状态在不同的地方用js更改了怎么办？（例如，单击行侦听器）您可以尝试手动触发“更改”，即使是从执行更改的js，例如。
$(".xyz input[type=checkbox]").live("change", function() {
    $(this).closest("tr").toggleClass("selected");
}).filter(":checked").each(function() {
    $(this).closest("tr").addClass("selected");
});