计算元素内的复选框

Question

我正在尝试找到一种方法来计算所有选中的复选框 within 使用 jQuery 的父元素。到目前为止，我还没有找到一个体面（且快速）的解决方案。

为了说明情况：我有一个 ul 列表，其中有一个“全选”复选框，每个子列表项有一个复选框。当没有选中的列表项时，我希望取消选中全选复选框。因此，我假设每次更改其中一项时，我都必须计算所有已检查的列表项。

[...]
<li><input type="checkbox" class="checkall" />
<ul>
<li><input type="checkbox" id="ch1" class="list" /></li>
<li><input type="checkbox" id="ch2" class="list" /></li>
<li><input type="checkbox" id="ch3" class="list" /></li>
</ul>
</li>
[...]

如您所见，我正在使用嵌套的 ul 列表，以供记录。 到目前为止，我有以下 jQuery 代码，用于选择父列表项，因为我只需要计算该“组”中的复选框。

// $(this).val() is neccesary for my code to know which checkbox has been affected
var parentnode = $('input#' + $(this).val()).parent().parent().parent();
alert(parentnode.children('input.list:checked').length);

我知道使用子选择器不起作用（这是用于循环，对吗？），但我找不到从“父节点”元素中计算选中复选框长度的方法。你能帮帮我吗?

Answer 1

由于children() 仅处理您元素的直接子元素，因此您可以使用find() 来处理与选择器匹配的所有后代：

alert(parentnode.find('input.list:checked').length);