javascript - 检查是否未选中 n 个复选框

Question

我有以下 HTML 元素:

<input type="checkbox" id="dog_pop_123">
<input type="checkbox" id="cat_pop_123">
<input type="checkbox" id="parrot_pop_123">

我想检查一下，如果三个复选框都没有被选中，我需要返回 false。但是，我需要考虑到第三个复选框可能不存在。

现在我有这个:

var id = 123;

if ( !$('#dog_pop_'+id+':checked').length
    && !$('#cat_pop_'+id+':checked').length
    && !$('#parrot_pop_'+id+':checked').length ) {
  return false;
}

但是，如果最后一个输入不存在，而前两个确实存在并被检查，这将返回 false，它不应该返回。

我该如何解决这个问题？

Answer 1

我建议将复选框分组到一个共同的父项中:

<fieldset id="group1">
    <input type="checkbox" id="dog_pop_123">
    <input type="checkbox" id="cat_pop_123">
    <input type="checkbox" id="parrot_pop_123">
</fieldset>

并使用以下内容:

return !($('#group1 input:checkbox').length == $('#group1 input:checkbox:not(":checked")').length);

实际上，如果复选框的数量等于未选中的复选框的数量，则返回 false(使用 ! 运算符)，否则返回 true。

引用资料:

• > :checkbox selector .
• > :checked selector .
• > :not() selector .