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')) 

});