Родительские / дочерние флажки с меткой

Question

Я хотел бы иметь родителей / флажки с таким поведением:

1. Нажатие на родителей выбрать / отменить выбор всех детей
2. Родитель проверяется, если один или несколько детей selected
3. Родитель не проверяется, если не выбран ни один дочерний элемент

Этот код работает:

<ul class="list-group" id="mydiv">
   <li class="list-group-item"><input type="checkbox" name="parent1" id="parent1" value=""> <label for "parent1">Parent 1</label>
      <ul class="list-group">
         <li class="list-group-item"><input type="checkbox" name="child11" value=""> Child 11</li>
         <li class="list-group-item"><input type="checkbox" name="child12" value=""> Child 12</li>
         <li class="list-group-item"><input type="checkbox" name="child13" value=""> Child 31</li>
      </ul>
   </li>

   <li class="list-group-item"><input type="checkbox" name="parent2" value=""> Parent 2
      <ul class="list-group">
         <li class="list-group-item"><input type="checkbox" name="child21" value=""> Child 21</li>
         <li class="list-group-item"><input type="checkbox" name="child22" value=""> Child 22</li>
      </ul>
   </li>
</ul>

JS:

$('input[type=checkbox]').click(function(){
   $(this).next().find('input[type=checkbox]').prop('checked',this.checked);
   $(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
      return $(this).next().find(':checked').length;
   });
});

Меня беспокоит то, что как только я установил тег , он больше не работает. Я не могу понять, почему.

Вот ручка: https://codepen.io/Jibeji/pen/povYKXo

Answer 1

Отвечаю сам. Это более элегантно и поддерживает метки:

$('input[type=checkbox]').click(function(){
   $(this).nextUntil('li').find('input[type=checkbox]').prop('checked',this.checked);
   $(this).closest('ul').siblings('input:checkbox').prop('checked',function(){
      return $(this).nextUntil('li').find(':checked').length;
   });
});

Оригинальная ручка отредактирована.

Answer 2

Это больше не работает, потому что $(this).next() больше не ссылается на следующий вход, так как там есть метки. Кажется, вы хотите .next().next(). Возможно, вы захотите выбрать ul другим способом, потому что вы видите, как легко эта установка может сломаться.