Second conditional statement is not triggering -

By default all of the checkboxes are checked, and has a parent child relation. When all the checkboxes are unchecked I want to add a class.But The second else if statement is not working -

if($('#treelist :checkbox:not(:checked)').length == 0){ 
   $('.row.cd-feed-wrapper').addClass('visible');
 } else if($('#treelist :checkbox:checked').length == 0){
  $('.row.cd-feed-wrapper').addClass('hidden');
}

The first one when the page loads.

codepen setup : http://ift.tt/2c3LDam

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

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

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