jquery - 获取从复选框到 div 的状态

Question

我需要从复选框获取状态到我的 div。 div 包裹着复选框。

<div id="checkWrapper">
<input type="checkbox" />
</div>

类似这样的事情。当用户单击复选框并使其处于选中状态时，我需要为 #checkWrapper div 获取一些类。类可以是任何东西，也许是“checked”之类的东西。

用jquery可以吗？容易做吗？

Answer 1

您可以使用:checked选择器 .length查看是否找到任何匹配项，如下所示:

var is_checked = $("#checkWrapper :checkbox:checked").length > 0;

对于点击处理程序，您可以执行以下操作:

$("#checkWrapper :checkbox").change(function() {
  $("#checkWrapper").toggleClass("checked", this.checked);
});

这会在检查时添加 checked 类，在未检查时将其删除。如果您需要对许多元素执行此操作，请使用类似 class="checkWrapper" 和 .closest() 的类。 ，像这样:

$(".checkWrapper :checkbox").change(function() {
  $(this).closest(".checkWrapper").toggleClass("checked", this.checked);
});