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

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

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

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

我看了很多post，上面有类似的解决方案，但它似乎对我不起作用。 我不确定为什么，但这指的是HTMLDocument而不是元素。

（编辑）在这个页面上会有标记的复选框，我想申请“选中”的复选框。 在评论@cimmanon提到事件处理。 我需要仔细研究一下。 谢谢你的答案！

（编辑）

所以在页面加载之后会有标记的框（我认为它们将始终包含checked =“checked” – 不确定）复选框。 这些是需要新风格的。 不需要点击它们和应用风格的交互，但仍然非常酷。

Answer 1

试试这个…

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

例

问候。

Answer 2

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

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

在这里看到它。

Answer 3

给你的复选框一个名字，以便jQuery可以挂钩：

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

Answer 4

$（this）只会引用你的复选框（这样你可以根据你的代码找到它的祖父母）当你在一个事件处理程序中调用时，将它分配给@cimmanon暗示的复选框元素。

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

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

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