jQuery traversing parent и children

Question

У меня есть вложенный несортированный список, и я хочу поместить событие click на родительский флажок, поэтому, когда он проверяет, он проверяет все дочерние флажки и наоборот. По какой-то причине я могу получить только селектор, чтобы получить все входы типа флажок ... ive попробовал разнообразие или способы, это один из них. какие-либо предложения ?

<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

Это должно работать:

Сначала вы вернуться к LI и чем вы будете искать для флажков

$('#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')) 

});