Walid Omonos Walid Omonos - 3 months ago 30
jQuery Question

Parent and child grandchild checkboxes

<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>


There are some checkboxes on a page.I have need:


  1. Check all childs if parent is checked.

  2. Uncheck parent if all childs are unchecked.

  3. Check parent if at least one child is checked.



How can I accomplish this ? I found a solution here Parent and child checkboxes
it, I am having problem with the grand child functionality

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

Answer

$('#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>