Родитель и ребенок Grandchild флажков

Question

<div class="col-lg-3 col-xs-3 col-left"> 
      <h4>Topics</h4> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" value="1" checked> mCRC 
       </label> 
      </div> 
      <div class="checkbox ml10"> 
       <label> 
        <input type="checkbox" value="2" data-parent="1" id="stivarga-efficacy" checked> STIVARGA Efficacy 
       </label> 
      </div> 
      <div class="checkbox ml20"> 
       <label> 
        <input type="checkbox" value="3" data-parent="1,2" id="long-term" checked> Long-Term Responders 
       </label> 
      </div> 
      <div class="checkbox ml20"> 
       <label> 
        <input type="checkbox" value="4" data-parent="1,2" id="stivarga-in-clinical" checked> STIVARGA in Clinical Practice 
       </label> 
      </div> 
      <div class="checkbox ml10"> 
       <label> 
        <input type="checkbox" value="5" data-parent="1" checked> STIVARGA AE Management 
       </label> 
      </div> 
      <div class="checkbox ml10"> 
       <label> 
        <input type="checkbox" value="6" data-parent="1" checked> Dosing 
       </label> 
      </div> 
      <div class="checkbox ml10"> 
       <label> 
        <input type="checkbox" value="7" data-parent="1" checked> Patient Communication 
       </label> 
      </div> 
      <div class="checkbox ml10"> 
       <label> 
        <input type="checkbox" value="8" data-parent="1" checked> Case Studies 
       </label> 
      </div> 

      <div class="checkbox"> 
       <label> 
        <input type="checkbox" value="9" checked> GIST 
       </label> 
      </div> 

     </div> 

Есть несколько флажков на page.I есть необходимость:

1. Проверьте все Чайлдс, если родитель проверяется.
2. Снимите отметку с родителя, если все дочерние элементы не отмечены.
3. Проверьте родительский элемент, если установлен хотя бы один ребенок.

Как это сделать? Я нашел решение здесь Parent and child checkboxes это, я имею проблемы с великой функциональностью детской

codepen http://codepen.io/Assert/pen/mAbVAE

Answer 1

$('#treeList :checkbox').change(function(){ 
 
    $(this).siblings('ul').find(':checkbox').prop('checked', this.checked); 
 
    if (this.checked) { 
 
     $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true); 
 
    } else { 
 
     $(this).parentsUntil('#treeList', 'ul').each(function(){ 
 
      var $this = $(this); 
 
      var childSelected = $this.find(':checkbox:checked').length; 
 
      if (!childSelected) { 
 
       $this.prev(':checkbox').prop('checked', false); 
 
      } 
 
     }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<ul id="treeList"> 
 
    <li> 
 
    <input type="checkbox" name="selectedRole"> 
 
    Application Manager 
 
    <ul> 
 
     <li> 
 
      <input type="checkbox" name="selectedRole"> 
 
      Application Manager Panel 
 
     </li> 
 
     <li> 
 
      <input type="checkbox" name="selectedRole"> 
 
      Client Role 
 
      <ul> 
 
       <li> 
 
        <input type="checkbox" name="selectedRole"> 
 
        Client Task 1 
 
       </li> 
 
       <li> 
 
        <input type="checkbox" name="selectedRole"> 
 
        Client Task 2 
 
       </li> 
 
        
 
       </ul> 
 
       </li> 
 
      
 
      <li> 
 
      <input type="checkbox" name="selectedRole"> 
 
      Client Role 
 
      <ul> 
 
       <li> 
 
        <input type="checkbox" name="selectedRole"> 
 
        Client Task 1 
 
       </li> 
 
       <li> 
 
        <input type="checkbox" name="selectedRole"> 
 
        Client Task 2 
 
       </li> 
 
        
 
       
 
      </ul> 
 
     </li> 
 

 
</ul>

Example 1 :

Referance Site :