如何检查是否已选中所有复选框

Question

如何使用jquery检查是否已选中或取消选中所有复选框,我有子孙输入元素 -

codepen设置: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>

Answer 1

使用:checkbox让所有复选框,然后使用的组合:not(),并:checked过滤掉所有未选中的复选框.

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>