Показать / Спрятать детей li при установленном флажке

Question

У меня есть большой неупорядоченный список категорий, чтобы пользователь мог выбрать, в какую категорию он хочет, чтобы его продукт был. У каждой родительской категории есть дочерние элементы. Я хотел бы скрыть всех детей, и когда вы проверяете родительскую категорию, показываются дети этой категории. Я попробовал этот код, и он переключает все дочерние элементы, а не только тот, который проверяется в текущем li.

jQuery

    $('.wcvendors-pro-dashboard-wrapper ul.product_cat_checklist > li > input[type=checkbox]').change(function()
     {
   if ($(this).is(':checked')) {
      $( ".wcvendors-pro-dashboard-wrapper ul.product_cat_checklist li > ul.children" ).toggle( "slow", function() {
      });

      };
    });

Список

<ul class="product_cat_checklist">
    <li id="product_cat-15"><input class="wcv_category_check" value="15" type="checkbox" name="product_cat[]" id="in-product_cat-15" data-parsley-multiple="product_cat">
    <label class="selectit" for="in-product_cat-15">Home Furnishings</label>
        <ul class="children">
        <li id="product_cat-61">
            <input class="wcv_category_check" value="61" type="checkbox" name="product_cat[]" id="in-product_cat-61" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-61">Bedroom</label>
        </li>
        <li id="product_cat-63">
            <input class="wcv_category_check" value="63" type="checkbox" name="product_cat[]" id="in-product_cat-63" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-63">Children’s Furniture</label>
        </li>
        <li id="product_cat-60">
            <input class="wcv_category_check" value="60" type="checkbox" name="product_cat[]" id="in-product_cat-60" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-60">Kitchen &amp; Dining</label>
        </li>
        </ul>
    </li>

    <li id="product_cat-38">
        <input class="wcv_category_check" value="38" type="checkbox" name="product_cat[]" id="in-product_cat-38" data-parsley-multiple="product_cat"> 
        <label class="selectit" for="in-product_cat-38">Arts &amp; Crafts</label>
        <ul class="children">
            <li id="product_cat-53">
                <input class="wcv_category_check" value="53" type="checkbox" name="product_cat[]" id="in-product_cat-53" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-53">Art Supplies</label>
            </li>
            <li id="product_cat-52">
                <input class="wcv_category_check" value="52" type="checkbox" name="product_cat[]" id="in-product_cat-52" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-52">Bath &amp; Beauty</label>
            </li>
            <li id="product_cat-46">
                <input class="wcv_category_check" value="46" type="checkbox" name="product_cat[]" id="in-product_cat-46" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-46">Clothing &amp; Shoes</label>
            </li>
        </ul>
    </li>
</ul>

Answer 1

Вам нужно скрыть дочерние ul s при загрузке страницы и показать их в зависимости от состояния флажков, используя следующий код:

$('li > input[type=checkbox]').on('change', function() {
  var $this = $(this),
    $ul = $this.parent().find('> ul');

  if ($this.is(':checked')) $ul.show();
  else $ul.hide();
});

Для сокрытия ul s используйте этот CSS код:

ul.children{
  display: none;
}

Рабочий пример