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

Question

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

<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');
}

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

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

（编辑）

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

因此，在页面加载之后，将会有标记的框（我认为它们将始终包含已选中的 =“已检查” ——不确定）复选框。这些是需要新风格的人。无需单击它们并应用样式的交互，但仍然非常酷。

score 8 · Accepted Answer

尝试这个...

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

问候。

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

4 回答 4