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

Posted 2023-03-05

【中文标题】如果选中复选框，则将类添加到父元素

【英文标题】：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");
);

Example

您好。

【讨论】：

一个更短的版本：jsfiddle.net/LE46Q/1 - 编辑：你的实际上更万无一失，因为它检查检查状态。

@ZakAngelle Thx 不错的版本。

但如果我不必申请更改事件，即是否从数据库中预先检查无线电？？

【参考方案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);
);

See it here.

【参考方案4】：

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

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

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

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