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。

参考文献：

Answer 2

请尝试以下代码：

var id = 123, 
    checkboxes = $('#dog_pop_' + id + ', #cat_pop_' + id + ', #parrot_pop_' + id);
if(checkboxes.filter(function() {return this.checked !== true;}).length !== checkboxes.length) {
    //Not all checkboxes are checked
}

Answer 3

if($('input[id$="pop_123"]').length != $('input[id$="pop_123"]:checked').length ) {
  return false;
}

除非你有很多以pop_123结尾的id，否则

应该可以解决这个问题。在这种情况下，您也可以添加[type=checkbox]过滤器。

在选择器中使用$=结束。见documentation

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

3 个答案: