ネストされたチェックボックスでのカスケードチェック

Question

私はカスケードチェックをチェックボックス付きのネストされたリストに実装しようとしています。

ᾠῗᵲᄐᶌからthis answerを使用しています。

特定のノードの親のチェック/チェックを外すのに問題があります。私はすべての親をチェックすることができますが、拳1だけをオフにして、私が間違っていることを理解することはできません。

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; 
    }); 
}); 

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