计算元素内的复选框数量

Question

我正在尝试找到一种方法来使用 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);

我知道它无法使用子选择器（用于循环，对吧？），但我找不到一种方法来计算“parentnode”元素中选中的复选框的长度。你能帮我吗？

Answer 1

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

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