jQuery遍歷父項和子項

Question

我有一個嵌套的未排序列表，我想在父複選框上放置一個單擊事件，因此當它檢查它檢查所有子項複選框時，反之亦然。出於某種原因，我只能得到選擇器來獲取類型複選框的所有輸入... ...我嘗試了各種方法，這是其中之一。有什麼建議麼 ？

<ul id="parent"> 
<li> 
    <input type='checkbox'>first</input> 
    <ul> 
     <li><input type='checkbox'>child1</input> 
     </li> 
     <li><input type='checkbox'>child2</input> 
     </li> 
    </ul> 
</li> 

<li> 
    <input type='checkbox'>second</input> 
    <ul> 
     <li><input type='checkbox'>child1</input> 
     </li> 
     <li><input type='checkbox'>child2</input> 
     </li> 
    </ul> 
</li> 

</ul> 

jQuery的

$('#parent > li input[type=checkbox]').click(function() { 

      var parent = $(this); 

      if ($(parent).is(':checked')) { 
       $('li > input[type=checkbox]', parent).each(function() { 
        $(this).attr('checked', true); 
       }); 
      } 
      else { 
       $('li > input[type=checkbox]', parent).each(function() { 
        $(this).attr('checked', false); 
       }); 
      } 
     }); 

Answer 1

這應該工作：

首先，你回去李比你搜索複選框

$('#parent > li input[type=checkbox]').click(function() { 

    $(this).closest("li").find("ul li input[type=checkbox]").attr('checked', $(this).is(':checked')) 

}); 

然而，你可能會考慮加入一些類名稱。 所以你的代碼變得更具可讀性。

<li> 
    <input type='checkbox' class='category'>first</input> 
    <ul> 
     <li><input type='checkbox' class='subcategory'>child1</input> 
     </li> 
     <li><input type='checkbox' class='subcategory'>child2</input> 
     </li> 
    </ul> 
</li> 

比你的jQuery應該是這樣的：

$("#parent .category").click(function(){ 

    $(this).closest("li").find(".subcategory").attr('checked', $(this).is(':checked')) 

});