如果选中复选框，则将类添加到父元素答案

【问题标题】：if checkbox checked add class to parent element如果选中复选框，则将类添加到父元素
【发布时间】：2013-01-06 06:00:03
【问题描述】：

我有一个带有复选框的表格，如下所示：

<td class="table-col" >
  <div class="group-one" >
    <input type="checkbox"  />
  </div>
</td>

我想要做的是选中复选框以将“选定”类应用于“table-col”。

if ($('.table-col').find(':checked')) {
    $(this).parent().parent().addClass('selected');
}

我查看了许多具有与上述类似解决方案的帖子，但它似乎对我不起作用。我不确定为什么，但 this 指向的是 HTMLDocument 而不是元素。

（编辑）在这个页面上会有标记的复选框，那些我想应用的“选中”。在 cmets @cimmonon 上提到了事件处理。我需要查一下这个。也感谢您的回答！

（编辑）

<td class="table-col">
<div class="group-one">
    <input type="checkbox" checked="checked"/>
</div>
</td>

所以在页面加载之后会有标记的框（我认为它们总是包含 checked="checked" -- 不确定）复选框。这些是需要新风格的人。无需单击它们并应用样式的交互，但仍然非常酷。

【问题讨论】：

对我来说似乎可以正常工作？勾选复选框以更改父级的样式。 jsfiddle.net/b2uVV
这个类是否应该在事件发生时应用（选中该框）？如果是这样，您是否有一个事件处理程序来捕获该操作？
您可以执行 .closest('.table-col') 而不是两个父调用，但我认为您的代码很好。添加 console.log 语句以查看正在运行的内容并从中进行调试。
这应该可以，你有你的脚本吗？还有一件事，我猜你应该使用 toggleClass 而不是 addClass
@cimmanon 是的，这就是我想要做的（也将修改我的问题）。我什至不知道如何赶上这个事件。谢谢

【解决方案1】：

试试这个...

$(":checkbox").on('click', function(){
     $(this).parent().toggleClass("checked");
});

您好。

【讨论】：

【解决方案2】：

给你的复选框起个名字，这样 jQuery 就可以钩住它：

$('input[name=foo]').is(':checked')

【讨论】：

【解决方案3】：

您可以使用.change() 绑定到change 事件；然后，使用.closest() 和.toggleClass() 在祖父元素中添加或删除selected 类名。

$("input:checkbox").change(function(){
  $(this).closest(".table-col").toggleClass('selected', this.checked);
});

【讨论】：

【解决方案4】：

$(this) 只会引用您的复选框（以便您可以根据您的代码转到它的祖父母），当您在通过将其分配给复选框元素来调用的事件处理程序中时，正如@cimmanon 所暗示的那样.

因此，如果您将 .change() 处理程序分配给您的复选框，则 $(this) 将引用您的复选框。您实际上可以在一行中执行此操作，因为您可能想要打开或关闭“选定”类：

    $(":checkbox").change(function () {
    $(this).parent().parent().toggleClass('selected');
         });

否则 $(this) 指的是引发事件的控件，例如，如果您正在执行此代码以响应按钮单击处理程序，则 $(this) 将引用该按钮。

【讨论】：