mardi 20 août 2019

Checked parent checkbox if all child checkboxes are checked

I am trying to check parent node if all child node are checked. I have found some solutions on this particular topic as well. But, may be because of different nesting levels I am unable to achieve this.

Upto this point, I am able to check / uncheck child node according to the parent node. However, reverse is not working i.e, checking parent node if all child nodes are checked.

My Html

<ul class="treeview">
   <li id="li_1" class="contains-items">
      <div class="checkbox">
         <input id="1" type="checkbox" value="1" name="categories[]">
         <label for="1">
         Floor
         </label>
      </div>
      <ul style="display: none;">
         <li class="li_1">
            <div class="checkbox">
               <input id="4" type="checkbox" value="4" name="categories[]">
               <label for="4">
               1st Floor
               </label>
            </div>
         </li>
         <li class="li_1">
            <div class="checkbox">
               <input id="5" type="checkbox" value="5" name="categories[]">
               <label for="5">
               2nd Floor
               </label>
            </div>
         </li>
         <li class="li_1">
            <div class="checkbox">
               <input id="6" type="checkbox" value="6" name="categories[]">
               <label for="6">
               3rd Floor
               </label>
            </div>
         </li>
      </ul>
   </li>
   <li id="li_2">
      <div class="checkbox">
         <input id="2" type="checkbox" value="2" name="categories[]">
         <label for="2">
         Rent
         </label>
      </div>
   </li>
   <li id="li_3" class="contains-items">
      <div class="checkbox">
         <input id="3" type="checkbox" value="3" name="categories[]">
         <label for="3">
         View
         </label>
      </div>
      <ul style="display: none;">
         <li class="li_3">
            <div class="checkbox">
               <input id="7" type="checkbox" value="7" name="categories[]">
               <label for="7">
               Pool View
               </label>
            </div>
         </li>
         <li class="li_3">
            <div class="checkbox">
               <input id="8" type="checkbox" value="8" name="categories[]">
               <label for="8">
               Mountain View
               </label>
            </div>
         </li>
         <li class="li_3">
            <div class="checkbox">
               <input id="9" type="checkbox" value="9" name="categories[]">
               <label for="9">
               Courtyard
               </label>
            </div>
         </li>
      </ul>
   </li>
</ul>

Jquery

 $('input[type=checkbox]').change(function(){
            // if is checked
            if($(this).is(':checked')){

                // check all children
                $(this).parent().siblings().find('li input[type=checkbox]').prop('checked', true);

                //if all siblings are checked, check its parent checkbox
                if($(this).parent().siblings('li input[type=checkbox]').is(":checked")) {  
                    console.log('all siblings checked');
                    //check its parent checkbox
                }else{
                    console.log('not all siblings checked');
                }

            } else {

                // uncheck all children
                $(this).parent().siblings().find('li input[type=checkbox]').prop('checked', false);

            }

        });

However, even doing this it is always consoling not all sibilings checked even if all are checked.




Aucun commentaire:

Enregistrer un commentaire