JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

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

JavaScript

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