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

Question

我有一张带有复选框的表格如下：

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

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

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

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

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

（编辑）

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

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

Answer 1

试试这个......

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

Example

问候。

Answer 2

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

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

See it here.

Answer 3

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

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

Answer 4

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

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

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

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