从复选框到div获取状态

Question

我需要从复选框到我的div获取状态。 div正在包装复选框。

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

这样的事情。当用户单击复选框并且它被检查状态时，我需要获得一些类到#checkWrapper div。类可以是任何东西，也许类似于“已检查”。

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

Answer 2

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