Question

My HTML Dom like the followings:

<div class="menu">
   <input type="checkbox" value="1" class="chk-act">
   <input type="checkbox" value="2" class="chk-act">
   <input type="checkbox" value="3" class="chk-act">
</div>


<div class="menu">
   <input type="checkbox" value="4" class="chk-act">
   <input type="checkbox" value="5" class="chk-act">
   <input type="checkbox" value="6" class="chk-act">
   <input type="checkbox" value="7" class="chk-act">
</div>



<div class="menu">
   <input type="checkbox" value="8" class="chk-act">
   <input type="checkbox" value="9" class="chk-act">
</div>

The number of Checkboxes is not fixed in each div. That can be 1 up to 50. So I need to check in each div if all checkboxes checked then some changes in div style like changed the color, what is your suggestion to check all checkboxes checked?

Answer 1

In one line:

$('.menu:has(:checkbox:not(:checked))');

To explain, this will select all the <div class="menu"> elements which have inside them a checkbox which hasn’t been checked. You could then add a css class or do whatever you need. If you needed to ‘reset’ them after adding a class, I’d do something like this:

$('.menu')
    .removeClass('notChecked')
    .filter(':has(:checkbox:not(:checked))')
    .addClass('notChecked');