Question

I have the following HTML elements:

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

I want to check that, if the three of the checkboxes are not checked, I need to return false. However, I need to take into account that the third checkbox might not exist.

Right now I have this:

var id = 123;

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

However, if the last input doesn’t exist, and the first two do exist and are checked, this would return false, and it should not.

How can I solve this?

Answer 1

I’d suggest grouping the checkboxes together within a common parent:

<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>

And using the following:

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

Effectively if the number of checkboxes is equal to the number of un-checked checkboxes return false (using the ! operator), else return true.

References:

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