Elternteil und Kind Enkelkind Ankreuzfelder

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> 

Es gibt einige Kontrollkästchen auf einem page.I haben müssen:

1. Überprüfen Sie alle Childs, wenn ein Elternteil überprüft wird.
2. Deaktivieren Sie das übergeordnete Element, wenn alle untergeordneten Elemente deaktiviert sind.
3. Überprüfen Sie die Eltern, wenn mindestens ein Kind markiert ist.

Wie kann ich das erreichen? Ich fand eine Lösung hier Parent and child checkboxes es, ich habe Probleme mit der großen Kind Funktionalität

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 :