Post
Ask Question

CheckBox with Treeview using JQuery

HTML 
  1. <ul id="treeList">  
  2.     <li>  
  3.         <input type="checkbox" name="selectedRole"> Root  
  4.         <ul>  
  5.             <li>  
  6.                 <input type="checkbox" name="selectedRole"> Child  
  7.             </li>  
  8.             <li>  
  9.                 <input type="checkbox" name="selectedRole"> Child  
  10.                 <ul>  
  11.                     <li>  
  12.                         <input type="checkbox" name="selectedRole"> Sub child  
  13.                     </li>  
  14.                     <li>  
  15.                         <input type="checkbox" name="selectedRole"> Sub child  
  16.                     </li>  
  17.   
  18.                 </ul>  
  19.             </li>  
  20.   
  21.             <li>  
  22.                 <input type="checkbox" name="selectedRole"> Child  
  23.                 <ul>  
  24.                     <li>  
  25.                         <input type="checkbox" name="selectedRole"> Sub child  
  26.                     </li>  
  27.                     <li>  
  28.                         <input type="checkbox" name="selectedRole"> Sub child  
  29.                     </li>  
  30.   
  31.   
  32.                 </ul>  
  33.             </li>  
  34.   
  35.         </ul>  
JQuery
  1. $('#treeList :checkbox').change(function() {  
  2.     $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);  
  3.     if (this.checked) {  
  4.         $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);  
  5.     } else {  
  6.         $(this).parentsUntil('#treeList', 'ul').each(function() {  
  7.             var $this = $(this);  
  8.             var childSelected = $this.find(':checkbox:checked').length;  
  9.             if (!childSelected) {  
  10.                 $this.prev(':checkbox').prop('checked', false);  
  11.             }  
  12.         });  
  13.     }  
  14. });