如果选中，则显示/隐藏 UL 子项答案

【问题标题】：Show/Hide UL child if checked如果选中，则显示/隐藏 UL 子项
【发布时间】：2016-02-12 16:18:48
【问题描述】：

我试图在单击父级时显示/隐藏一些 ul 复选框。我到处搜索，但我无法让它工作！

有人可以帮我解决这个问题吗？如果选中了父类别，则子复选框需要显示/隐藏。

这是代码：

<div id="refine-categories">
						<h4>Categories</h4>
						<ul class="parent cf">
<li id='project_category-3' class="popular-category"><label class="selectit"><input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" /> Aanbouw &amp; Opbouw</label><ul class='children'>

<li id='project_category-33'><label class="selectit"><input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" /> aanbouw</label></li>

<li id='project_category-34'><label class="selectit"><input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" /> algemeen</label></li>

<li id='project_category-35'><label class="selectit"><input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" /> Fundering en heiwerken</label></li>

<li id='project_category-36'><label class="selectit"><input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" /> garage bouwen</label></li>

<li id='project_category-37'><label class="selectit"><input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" /> isoleren</label></li>

<li id='project_category-38'><label class="selectit"><input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" /> nieuwbouw</label></li>

<li id='project_category-39'><label class="selectit"><input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" /> opbouw</label></li>

<li id='project_category-40'><label class="selectit"><input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" /> renovatie</label></li>

<li id='project_category-41'><label class="selectit"><input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" /> veranda en serre</label></li>
</li>
</ul>					</div>

当我点击父复选框时，我可以看到跨度类更改为 <span class="custom checkbox checked"></span>

希望有人能帮我解决这个问题！

感谢您的宝贵时间！

PS：你可以在这里查看网站：http://bit.ly/20Miaom它在侧边栏（右）。

【问题讨论】：

如果对您有帮助，请记得采纳其中一个答案

标签： javascript jquery html wordpress checkbox

【解决方案1】：

您需要为此使用一些 JQuery。

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

而你的孩子需要得到display: none

我给你做了一个小提琴，我希望这是你想要的： https://jsfiddle.net/jfuhdq0g/2/

【讨论】：

Fiddle 上的示例效果很好！但是当将 JQuery 添加到网站时没有任何反应？我可能把它放在错误的文件中吗？同样在您的示例中，您调用#in-project_category-3。但在网站上有更多的父母。所以下一个父母将是第 8 类。？我怎样才能让它显示/隐藏呢？我对你的样品真的很满意！迫不及待地想把它全部修好哈哈。再次感谢您的帮助！
我更新了小提琴，如果您想要更多的 id 具有相同的效果，您只需添加更多代码行，就像小提琴中显示的那样。好吧，如果它不起作用，我可以想象您可能以错误的方式包含了 JQuery（jquery 存储库是否包含在您网站的头部？）或者您忘记给 ul class="children 显示：没有喜欢显示在我的小提琴中。请注意，如果您使用此方法，每个孩子 ul 都应该有一个唯一的类，否则所有孩子都会在点击其中一个父母 li 时打开。
您好马塞尔，感谢您的帮助。我只是无法让它工作。我不知道我做错了什么？你能看看网站吗？并帮助我？ bit.ly/20Miaom
好吧，控制台告诉我“$ 不是函数”...您是否将 JQuery 包含到您网站的标题中？

【解决方案2】：

将.children 设置为display:none;。

然后从.parent，找到第一个复选框。添加change 事件，然后添加toggle .children（如果选中）。

要对所有列表更通用，请使用this，返回.parent 并找到.children 进行切换。

$('.parent input[type="checkbox"]:first-child').change(function(){
    $(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});

$('.parent input[type="checkbox"]:first-child').change(function() {
  $(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});

.children {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refine-categories">
  <h4>Categories</h4>
  <ul class="parent cf">
    <li id='project_category-3' class="popular-category">
      <label class="selectit">
        <input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw &amp; Opbouw</label>
      <ul class='children'>

        <li id='project_category-33'>
          <label class="selectit">
            <input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
        </li>

        <li id='project_category-34'>
          <label class="selectit">
            <input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
        </li>

        <li id='project_category-35'>
          <label class="selectit">
            <input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
        </li>

        <li id='project_category-36'>
          <label class="selectit">
            <input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
        </li>

        <li id='project_category-37'>
          <label class="selectit">
            <input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
        </li>

        <li id='project_category-38'>
          <label class="selectit">
            <input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
        </li>

        <li id='project_category-39'>
          <label class="selectit">
            <input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
        </li>

        <li id='project_category-40'>
          <label class="selectit">
            <input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
        </li>

        <li id='project_category-41'>
          <label class="selectit">
            <input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
        </li>
    </li>
    </ul>
</div>
<div id="refine-categories">
  <h4>Categories 2</h4>
  <ul class="parent cf">
    <li id='project_category-3' class="popular-category">
      <label class="selectit">
        <input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw &amp; Opbouw</label>
      <ul class='children'>

        <li id='project_category-33'>
          <label class="selectit">
            <input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
        </li>

        <li id='project_category-34'>
          <label class="selectit">
            <input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
        </li>

        <li id='project_category-35'>
          <label class="selectit">
            <input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
        </li>

        <li id='project_category-36'>
          <label class="selectit">
            <input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
        </li>

        <li id='project_category-37'>
          <label class="selectit">
            <input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
        </li>

        <li id='project_category-38'>
          <label class="selectit">
            <input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
        </li>

        <li id='project_category-39'>
          <label class="selectit">
            <input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
        </li>

        <li id='project_category-40'>
          <label class="selectit">
            <input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
        </li>

        <li id='project_category-41'>
          <label class="selectit">
            <input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
        </li>
    </li>
    </ul>
</div>

【讨论】：