显示/隐藏UL子女,如果选中

时间:2015-11-11 14:37:45

标签: javascript jquery html wordpress checkbox

我在点击父级时试图显示/隐藏一些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类已更改为<span class="custom checkbox checked"></span>

希望有人可以帮我解决这个问题!

感谢您的时间!

PS:您可以在此处查看网站:http://bit.ly/20Miaom它位于侧边栏(右侧)。

2 个答案:

答案 0 :(得分:0)

你需要使用一些JQuery。

<xs:element name="list1_City">
  <xs:complexType>
    <xs:sequence>
       <xs:element name="list2">...</xs:element>
       <xs:element name="matrix1_Type_Collection">...</xs:element>
    </xs:sequence>
    <xs:attribute name="City" type="xs:string" use="required"/>
    <xs:attribute name="Year" type="xs:integer" use="required"/>
  </xs:complexType>
</xs:element>

而您的孩子需要获得$('#in-project_category-3').click(function () { $(".children").toggle(this.checked); });

我让你成为一个小提琴,我希望这是你想要的: https://jsfiddle.net/jfuhdq0g/2/

答案 1 :(得分:0)

.spec.js设置为.children

然后从display:none;找到第一个复选框。如果已选中,则添加.parent事件,然后change toggle

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

.children

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