CODEWITHSUNDEEP
jquerycheckbox
Mahade Walid
Mahade Walid

Reputation: 9664

How to check if all of the checkbox are checked

How can I check if all of my checkboxes are checked or unchecked with jquery,I have child and grandchild input elements-

codepen setup : http://codepen.io/Assert/pen/BLBjpk

<ul id="treeList">
  <li>
    <input type="checkbox" name="selectedRole"> mCRC
  <ul>
  <li>
    <input type="checkbox" name="selectedRole"> STIVARGA Efficacy
    <ul>
      <li>
        <input type="checkbox" name="selectedRole"> Long-Term Responders
      </li>
      <li>
        <input type="checkbox" name="selectedRole"> STIVARGA in Clinical Practice
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" name="selectedRole"> STIVARGA AE Management
  </li>

  <li>
    <input type="checkbox" name="selectedRole"> Dosing
  </li>
  <li>
    <input type="checkbox" name="selectedRole"> Patient Communication
  </li>
  <li>
    <input type="checkbox" name="selectedRole"> Case Studies
  </li>
</ul>

<li>
  <input type="checkbox" name="selectedRole"> GIST
</li>

Upvotes: 2

Views: 8085

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use :checkbox to get all checkbox then use the combination of :not() and :checked to filter out all unchecked checkbox. 

if($('#treeList :checkbox:not(:checked)').length == 0){ 
   // all are checked
} else if($('#treeList :checkbox:checked').length == 0){
   // all are unchecked
}


$('#treeList :checkbox').change(function() {
  if ($('#treeList :checkbox:not(:checked)').length == 0) {
    console.log('all are checked');
  } else if ($('#treeList :checkbox:checked').length == 0) {
    console.log('all are unchecked');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="treeList">
  <li>
    <input type="checkbox" name="selectedRole">mCRC
    <ul>
      <li>
        <input type="checkbox" name="selectedRole">STIVARGA Efficacy
        <ul>
          <li>
            <input type="checkbox" name="selectedRole">Long-Term Responders
          </li>
          <li>
            <input type="checkbox" name="selectedRole">STIVARGA in Clinical Practice
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" name="selectedRole">STIVARGA AE Management
      </li>

      <li>
        <input type="checkbox" name="selectedRole">Dosing
      </li>
      <li>
        <input type="checkbox" name="selectedRole">Patient Communication
      </li>
      <li>
        <input type="checkbox" name="selectedRole">Case Studies
      </li>
    </ul>

    <li>
      <input type="checkbox" name="selectedRole">GIST
    </li>
</ul>

Upvotes: 9

Related Questions