JQuery обход родителей и детей

Question

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

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

});