모든 자식 체크 박스를 선택/선택 취소하십시오. jquery 부트 스트랩

Question

이 피들 (http://jsfiddle.net/7uR2B/)과 관련하여, 모든 자식 체크 박스를 선택/선택 해제하는이 피들과 동일한 기능을했습니다.

하지만 난 내 양식이 점을 이용하고 내 양식은 다른 DIV 및 SPAN이 체크 박스에 추가 bootstrapvthen에서 만든이 바이올린 스크립트 날이에 대한 도와주세요 부트 스트랩 checkboxes.` 더 작동하지 않을 때 모든 하위 상자를 선택/선택 취소하십시오. 내 양식의

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

<ul> 
 
    <li> 
 
     <div class="checker"> <span><input type="checkbox"></span> 
 

 
     </div>Administration 
 
     <ul> 
 
      <li> 
 
       <div class="checker"> <span class="checked"><input type="checkbox"></span> 
 

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

스크린 샷 [링크] 당신의 부트 스트랩 버전이 작동하지 않는 http://awesomescreenshot.com/0f549oknaf

Answer 1

의 checkbox 항목이 ul 요소에 다른 장소 상대에 위치하기 때문 ($ul = $li.parent();)를 사용하여 항목을 검색합니다. 귀하의 부트 스트랩 버전 :

<div class="checker"> 
     <span class="checked"> 
      <input type="checkbox"> 
     </span> 
    </div>President 
    <ul>... 

원래 바이올린 버전 : 나는 당신의 부트 스트랩 버전에서 고려로 변경된 요소의 위치를 ​​취할 약간 바이올린 코드를 변경

<input type="checkbox" />President 
    <ul> 

:

do { 
    $ul = $li.parent(); 
    //$parent = $ul.siblings(':checkbox'); old code 
    $parent = $ul.siblings('.checker'); 
    if ($chk.is(':checked')) { 
     $parent.find(':checkbox').prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) 
    } else { 
     $parent.find(':checkbox').prop('checked', false) 
    } 
    $chk = $parent; 
    $li = $chk.closest('li'); 
} while ($ul.is(':not(.someclass)')); 

작업 샘플은 Bootply Fiddle에서 찾을 수 있습니다.

Btw, 원래 피들 샘플 코드는 멋지다. 부모 요소를 얻으려면 시원한 방식으로 반복 루프를 사용했습니다.