Jquery를 사용하여 부모/자식 체크 박스를 선택 취소하십시오.

Question

jquery 또는 javascript에 익숙하지 않아서 제 문제에 대한 빠른 해결책이 필요합니다. 그 이유는 여기에 게시하는 이유입니다. 다음은 샘플 HTML 스 니펫입니다.

<ul> 
<li><input type="checkbox" />Administration 
    <ul> 
     <li><input type="checkbox" />President 
      <ul> 
       <li><input type="checkbox" />Manager 1 
        <ul> 
         <li><input type="checkbox" />Assistant Manager 1</li> 
         <li><input type="checkbox" />Assistant Manager 2</li> 
         <li><input type="checkbox" />Assistant Manager 3</li> 
        </ul> 
       </li> 
       <li><input type="checkbox" />Manager 2</li> 
       <li><input type="checkbox" />Manager 3</li> 
      </ul> 
     </li> 
     <li><input type="checkbox" />Vice President 
      <ul> 
       <li><input type="checkbox" />Manager 4</li> 
       <li><input type="checkbox" />Manager 5</li> 
       <li><input type="checkbox" />Manager 6</li> 
      </ul> 
     </li> 
    </ul> 
</li> 
</ul> 

Administration (관리)을 선택하면 모든 것을 확인하고 싶습니다. 대통령의 선택을 해제하면 그의 부모는 그의 자녀들과 함께 검사를받지 않아야하며 부통령과 자녀들 만 검사합니다. 마찬가지로 관리자 1을 선택하면 자녀도 확인해야합니다. 그러나 Assistant Manager 1을 선택 취소하면 Manager 1도 Asst 만 남겨두고 선택을 취소해야합니다. 관리자 2와 3이 확인되었습니다.

이 목록은 동적입니다. 아이가 더 많은 아이를 가질 수 있다는 것을 의미합니다.

미리 감사드립니다.

Answer 1

이를 참조하십시오 DEMO

$('li :checkbox').on('click', function() { 
    var $chk = $(this), 
     $li = $chk.closest('li'), 
     $ul, $parent; 
    if ($li.has('ul')) { 
     $li.find(':checkbox').not(this).prop('checked', this.checked) 
    } 
    do { 
     $ul = $li.parent(); 
     $parent = $ul.siblings(':checkbox'); 
     if ($chk.is(':checked')) { 
      $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) 
     } else { 
      $parent.prop('checked', false) 
     } 
     $chk = $parent; 
     $li = $chk.closest('li'); 
    } while ($ul.is(':not(.someclass)')); 
}); 

씨 : Uncheck parent checkbox if one child is unchecked