JQuery Show/Hide UL children 并取消选择其他 parents 复选框

Question

我会尽力描述我的问题。这个社区以前帮助过我，所以我希望有人会好心再次向我提供帮助。我对 JQuery.

了解不多

我们正在使用 Easy Digital Downloads 建立一个 wordpress 站点，因此我们有一些限制，例如 无法更改 HTML，但是我们可以在页面上添加 add JQuery 元素。

这是一个类别 selection 系统，用户应该能够 select 只有 1 个 parent 类别和 parent 下的多个子类别。

我正在为以下情况寻找 JQuery 解决方案。

我们有 5 个，可能是 6 个，"categories"。这些类别具有由 UL 表示的子类别。默认情况下，子类别应该被隐藏。当您单击 parent 类别时，它应该会显示下面的子类别。如果您在任何时候单击相同的 parent 类别，它应该取消 select 所有 children 并再次隐藏它们。

我也只希望 1 个 parent 类别在任何给定点 selected。

让我给你一个场景。您单击 Cat A，它会展开并显示 4 个子类别。您单击这些子类别中的 2 个。您改变了主意，而是点击了 Cat B。这应该会隐藏 Cat A 的子类别和 unselect children，以及 Cat A 的 parent。

如果我说得不够清楚，重要的是你永远不能 select 没有 parent 类别的子类别。

我用我在另一个线程中找到的东西做了一个基本的 fiddle。只是用于显示和隐藏（尽管我还没有添加 class 用于隐藏）这具有我们正在使用的 html 结构。

另一个问题是所有 parent 类别对 children (.children)

使用相同的 class

$('#in-download_category-156').click(function() {
  $(".children").toggle(this.checked);
});

FIDDLE

我知道这是一个很大的问题，所以我很感激你能给我的帮助！谢谢

Answer 1

试试这个（我在下面添加了一些注释）：

$('.fes-category-checklist > li > input[name^="download_category"]').change(function() {
  $(this)
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});

ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li > input[name^="download_category"]:not(:checked) ~ ul.children {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156" />
    <label for="in-download_category-156" class="selectit">cat a</label>

    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160" />
    <label for="in-download_category-160" class="selectit">cat b</label>

    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155" />
    <label for="in-download_category-155" class="selectit">cat c</label>

    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <input value="157" type="checkbox" name="download_category[]" id="in-download_category-157" />
    <label class="selectit" for="in-download_category-157">cat d</label>
  </li>
</ul>

请注意，我将第一个复选框组从 label and assigning a for attribute 中移出。

To associate the <label> with an <input> element in the way shown in the example above, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

还使用了一些 CSS 技巧，允许您 "style" 任何 相邻的兄弟姐妹 基于 pseudo-class of an element, in our case: A checkbox element with :checked state. Since our ul.childrens are not an immediate sibling of the checkboxes, instead of a child combinator we need to use general sibling combinator 来定位他们的样式。这有助于您不需要任何 Javascript 来切换 sub-category UL 的可见性状态。

编辑

OK，既然 HTML 结构必须保持完整，而且 parent 和 child 元素共享相同的 classes，我们可能别无选择，只能使用 chained child 组合器，因为我们不希望任何 children 获得与 parent。除非您可以在 parent 上分配一些特殊的 class 或属性（例如 <li id="download_category-156" class="parent-category">）以将它们与 child仁.

这看起来有点难看（更长的选择器），但它应该可以解决问题：

$('.fes-category-checklist > li > label.selectit > input[name^="download_category"]').change(function() {
  var categoryId = this.value;
  var $checkbox = $(this);

  $('.fes-category-checklist')
    .find('li[id^="download_category"]')
    .attr('data-open', function(index, value) {
      return this.id.endsWith(categoryId) && value === 'false';
    });

  $checkbox
    .closest('ul')
    .find('input[name^="download_category"]')
    .not(this)
    .prop('checked', false);
});

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});

ul {
  list-style: none;
  padding-left: 20px;
}

ul.fes-category-checklist > li {
  display: none;
}

li[data-open="false"] > ul.children {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul class="fes-category-checklist">
  <li id="download_category-156">
    <label class="selectit">
      <input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> cat a
    </label>
    <ul class="children">
      <li id="download_category-161"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> cat a-1</label></li>

      <li id="download_category-162"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> cat a-2</label></li>

      <li id="download_category-163"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> cat a-3</label></li>

      <li id="download_category-183"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> cat a-4</label></li>
    </ul>
  </li>

  <li id="download_category-160">
    <label class="selectit">
      <input value="160" type="checkbox" name="download_category[]" id="in-download_category-160"> cat b
    </label>
    <ul class="children">
      <li id="download_category-198"><label class="selectit"><input value="198" type="checkbox" name="download_category[]" id="in-download_category-198"> cat b-1</label></li>

      <li id="download_category-199"><label class="selectit"><input value="199" type="checkbox" name="download_category[]" id="in-download_category-199"> cat b-2</label></li>

      <li id="download_category-200"><label class="selectit"><input value="200" type="checkbox" name="download_category[]" id="in-download_category-200"> cat b-3</label></li>

      <li id="download_category-201"><label class="selectit"><input value="201" type="checkbox" name="download_category[]" id="in-download_category-201"> cat b-4</label></li>
    </ul>
  </li>

  <li id="download_category-155">
    <label class="selectit">
      <input value="155" type="checkbox" name="download_category[]" id="in-download_category-155"> cat c
    </label>
    <ul class="children">
      <li id="download_category-164"><label class="selectit"><input value="164" type="checkbox" name="download_category[]" id="in-download_category-164"> cat c-1</label></li>

      <li id="download_category-165"><label class="selectit"><input value="165" type="checkbox" name="download_category[]" id="in-download_category-165"> cat c-2</label></li>

      <li id="download_category-166"><label class="selectit"><input value="166" type="checkbox" name="download_category[]" id="in-download_category-166"> cat c-3</label></li>

      <li id="download_category-169"><label class="selectit"><input value="169" type="checkbox" name="download_category[]" id="in-download_category-169"> cat c-4</label></li>

      <li id="download_category-171"><label class="selectit"><input value="171" type="checkbox" name="download_category[]" id="in-download_category-171"> cat c-5</label></li>

      <li id="download_category-168"><label class="selectit"><input value="168" type="checkbox" name="download_category[]" id="in-download_category-168"> cat c-6</label></li>

      <li id="download_category-170"><label class="selectit"><input value="170" type="checkbox" name="download_category[]" id="in-download_category-170"> cat c-7</label></li>

      <li id="download_category-202"><label class="selectit"><input value="202" type="checkbox" name="download_category[]" id="in-download_category-202"> cat c-8</label></li>
    </ul>
  </li>

  <li id="download_category-157">
    <label class="selectit"><input value="157" type="checkbox" name="download_category[]" id="in-download_category-157"> cat d</label>
  </li>
</ul>

添加初始状态 children 可见性

以下几行最初将它们设置为 hidden。如果您想单独调整状态，您也可以传递 function in the second argument。

$(document).ready(function() {
  $('ul.fes-category-checklist')
    .find('> li[id^="download_category"]')
    .attr('data-open', false)
    .fadeIn();
});

此外，如果您想在 children UL 切换时给它们一些奇特的效果，请查看 my other post 如何使用 jQuery slideToggle.

希望对您有所帮助！

JQuery Show/Hide UL children 并取消选择其他 parents 复选框

JQuery Show/Hide UL children and unselect other parents checkbox

html

wordpress

checkbox

jquery

easy-digital-downloads

编辑

添加初始状态 children 可见性