如何檢查所有的孩子檢查

Question

嗨，我有以下結構：

<ul class="main"> 
    <li class="toggle"> 
    <input type="checkbox"> information 
    </li> 
    <ul> 
<li class="modulo"> 
    <input type="checkbox"> General 
</li> 
<ul> 
    <li class="example1"> 
    <input type="checkbox"> 
    </li> 
    <li class="example2"> 
    <input type="checkbox"> 
    </li> 
</ul> 
    </ul> 
</ul> 

我現在需要知道如何設置所有的孩子複選框當主父複選框被用戶檢查「檢查」

使用jQuery IM，感謝

Answer 1

你可以改變的標記像以下：

<ul class="main"> 
    <li class="toggle"> 
    <input type="checkbox"> information 
    <ul> 
    <li class="example1"> 
     <input type="checkbox"> 
    </li> 
    <li class="example2"> 
     <input type="checkbox"> 
    </li> 
    </ul> 
    </li> 

    <li class="modulo"> 
    <input type="checkbox"> General 
    <ul> 
    <li class="example1"> 
     <input type="checkbox"> 
    </li> 
    <li class="example2"> 
     <input type="checkbox"> 
    </li> 
    </ul> 
    </li> 
</ul> 

jQuery的

$('ul.main > li > :checkbox').change(function() { 
    $(this).next('ul').find(':checkbox').prop('checked', this.checked); 
}); 

Answer 2

如果您更正您的標記：

<ul class="main"> 
    <li class="toggle"> 
     <input type="checkbox"> information 
     <ul> 
      <li class="modulo"> 
      <input type="checkbox"> General 
      <ul> 
       <li class="example1"> 
       <input type="checkbox"> 
       </li> 
       <li class="example2"> 
       <input type="checkbox"> 
       </li> 
      </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

...這應該這樣做：

$(".main input[type='checkbox']").click(function() { 
    $(this).parent().find("input[type='checkbox']").prop("checked", this.checked); 
}); 

Live example | source

然後，你要處理的相反情況下（如果你取消祖先取消選中父所以所有祖先都不再檢查），但我離開，作爲一個練習。

Answer 3

這將觸發檢查：http://jsfiddle.net/

我建議你縮進代碼爲更多的方便閱讀過。