중첩 된 확인란으로 계단식 검사

Question

계단식 체크을 확인란이있는 중첩 목록에 구현하려고합니다.

ᾠῗᵲᄐᶌ에서 this answer을 사용하고 있습니다.

주어진 노드의 부모를 확인/선택 해제하는 데 문제가 있습니다. 나는 모든 부모를 검사 할 수 있지만 주먹 만 선택을 취소하고 내가 뭘 잘못하고 있는지 알 수 없다.

HTML

<ul> 
    <li> 
     <a href="#"> 
      <input type="checkbox"><span>NODE A</span> 
     </a> 
     <ul> 
      <li> 
       <a href="#"> 
        <input type="checkbox"><span>NODE A1</span> 
       </a> 
       <ul></ul> 
      </li> 
      <li> 
       <a href="#"> 
        <input type="checkbox"><span>NODE A2</span> 
       </a> 
       <ul></ul> 
      </li> 
      <li> 
       <a href="#"> 
        <input type="checkbox"><span>NODE A3</span> 
       </a> 
       <ul> 
        <li> 
         <a href="#"> 
          <input type="checkbox"><span>NODE A3a</span> 
         </a> 
         <ul></ul> 
        </li> 
        <li> 
         <a href="#"> 
          <input type="checkbox"><span>NODE A3b</span> 
         </a> 
         <ul> 
          <li> 
           <a href="#"> 
            <input type="checkbox"><span>NODE A3b1</span> 
           </a> 
           <ul></ul> 
          </li> 
          <li> 
           <a href="#"> 
            <input type="checkbox"><span>NODE A3b2</span> 
           </a> 
           <ul></ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"> 
      <input type="checkbox"><span>NODE B</span> 
     </a> 
     <ul></ul> 
    </li> 
    <li> 
     <a href="#"> 
      <input type="checkbox"><span>NODE C</span> 
     </a> 
     <ul> 
      <li> 
       <a href="#"> 
        <input type="checkbox"><span>NODE C1</span> 
       </a> 
       <ul></ul> 
      </li> 
      <li> 
       <a href="#"> 
        <input type="checkbox"><span>NODE C2</span> 
       </a> 
       <ul> 
        <li> 
         <a href="#"> 
          <input type="checkbox"><span>NODE C2a</span> 
         </a> 
         <ul></ul> 
        </li> 
        <li> 
         <a href="#"> 
          <input type="checkbox"><span>NODE C2b</span> 
         </a> 
         <ul></ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

JS

$("input:checkbox").click(function() 
{ 
    var isChecked = $(this).is(":checked"); 

    //down 
    $(this).parent().next().find("input:checkbox").prop("checked", isChecked); 

    //up 
    $(this).parents("ul").prev("a").find("input:checkbox").prop("checked", function() 
    { 
     return $(this).parent("a").next("ul").find(":checked").length; 
    }); 
}); 

뿐인 : https://jsfiddle.net/h8hzj01q/

Answer 1

문제는 문 $(this).parents("ul").prev("a").find("input:checkbox") 최저로 최상위 UL에서 위에서 아래로, 즉로부터 DOM을 통과이었다. 모든 부모 확인란을 선택하지 않으려면 역순으로해야합니다.
$(this).parents("ul").prev("a").find("input:checkbox")에서 얻은 jquery 객체를 반대로하고 each 루프를 사용하여 원하는 결과를 얻습니다.

당신은 당신의 코드를 변경 하단

위쪽에서 통과 find을 사용하는 동안이 같은 일을, 상하로를 통과 prev을 사용하기 때문에 일을 포함 예 :

jQuery.fn.reverse = [].reverse; 
 
$("input:checkbox").click(function() 
 
{ 
 
\t var isChecked = $(this).is(":checked"); 
 
\t 
 
\t //down 
 
\t $(this).parent().next().find("input:checkbox").prop("checked", isChecked); 
 

 
\t //up 
 
    $(this).parents("ul").prev("a").find("input:checkbox").reverse().each(function(a, b) { 
 
    \t $(b).prop("checked", function() 
 
    { 
 
     return $(b).parent("a").next("ul").find(":checked").length; 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
       <li> 
 
        <a href="#"> 
 
         <input type="checkbox"><span>NODE A</span> 
 
        </a> 
 
        <ul> 
 
         <li> 
 
          <a href="#"> 
 
           <input type="checkbox"><span>NODE A1</span> 
 
          </a> 
 
          <ul></ul> 
 
         </li> 
 
         <li> 
 
          <a href="#"> 
 
           <input type="checkbox"><span>NODE A2</span> 
 
          </a> 
 
          <ul></ul> 
 
         </li> 
 
         <li> 
 
          <a href="#"> 
 
           <input type="checkbox"><span>NODE A3</span> 
 
          </a> 
 
          <ul> 
 
           <li> 
 
            <a href="#"> 
 
             <input type="checkbox"><span>NODE A3a</span> 
 
            </a> 
 
            <ul></ul> 
 
           </li> 
 
           <li> 
 
            <a href="#"> 
 
             <input type="checkbox"><span>NODE A3b</span> 
 
            </a> 
 
            <ul> 
 
             <li> 
 
              <a href="#"> 
 
               <input type="checkbox"><span>NODE A3b1</span> 
 
              </a> 
 
              <ul></ul> 
 
             </li> 
 
             <li> 
 
              <a href="#"> 
 
               <input type="checkbox"><span>NODE A3b2</span> 
 
              </a> 
 
              <ul></ul> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"> 
 
         <input type="checkbox"><span>NODE B</span> 
 
        </a> 
 
        <ul></ul> 
 
       </li> 
 
       <li> 
 
        <a href="#"> 
 
         <input type="checkbox"><span>NODE C</span> 
 
        </a> 
 
        <ul> 
 
         <li> 
 
          <a href="#"> 
 
           <input type="checkbox"><span>NODE C1</span> 
 
          </a> 
 
          <ul></ul> 
 
         </li> 
 
         <li> 
 
          <a href="#"> 
 
           <input type="checkbox"><span>NODE C2</span> 
 
          </a> 
 
          <ul> 
 
           <li> 
 
            <a href="#"> 
 
             <input type="checkbox"><span>NODE C2a</span> 
 
            </a> 
 
            <ul></ul> 
 
           </li> 
 
           <li> 
 
            <a href="#"> 
 
             <input type="checkbox"><span>NODE C2b</span> 
 
            </a> 
 
            <ul></ul> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul>