Javascript 使用JQuery单击父复选框时选中所有直接子复选框
我的html代码中有一个列表,在其中单击父复选框时,应选中直接子复选框Javascript 使用JQuery单击父复选框时选中所有直接子复选框,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我的html代码中有一个列表,在其中单击父复选框时,应选中直接子复选框 <ul class="test_ex"> <li> <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a> <ul class="example">
<ul class="test_ex">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>
</li>
</ul>
<ul class="test_ex_sample">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>
</li>
</ul>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
在这里,第一个列表可以正常工作。再次单击第二个列表时,它也会检查第三个列表的子项
- 其次,我尝试了这套代码 尝试使用选中的类并从该类中获取子类。这将检查属于该类的所有家长
如果有人能指出我的错误那就太好了 您可以使用jQuery来实现这一点。首先,从父项中删除
onchange=“fnTest(this);”
复选框。绑定父项的更改事件复选框,如下所示:
$(function(){
$('.parent').click(function(){
$(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
});
});
试试看
function fnTest(check) {
$(check).closest("ul").find(":checkbox").prop("checked",check.checked);
}
如果你只想直接让孩子们这样做
function fnTest(check) {
$(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);
}
注意:在jquery中使用最新版本,并且id应该是第一次尝试使用兄弟姐妹()时唯一的。您可以更改为以下内容:
function fnTest(check){
if($(check).is(':checked')){
$(check).siblings('.example:first').find('.child').prop("checked",true);
}
else{
$(check).siblings('.example:first').find('.child').prop("checked",false);
}
}
通过使用此选项,它只检查第一个子项。并将.attr更改为.prop
下面是一个演示:/p>//测试正常
$(document).ready(function(e) {
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});});
您应该有元素的唯一id。我使用了绑定事件并尝试了。它不起作用。所以我用了onchange。小提琴-这是有效的!但第二次就不行了。就像在一次我检查父项,然后取消选中它,然后再次检查它,它不起作用。是的,我看到了,为此我使用
.attr
更新到.prop
。选中更新的答案和链接此选项选中所有复选框。我只想检查直系子女,先生。@user3201640您能告诉我这个最相关的完美解决方案的例子吗。它就像一个符咒。谢谢
function fnTest(check){
if($(check).is(':checked')){
$(check).siblings('.example:first').find('.child').prop("checked",true);
}
else{
$(check).siblings('.example:first').find('.child').prop("checked",false);
}
}
$(document).ready(function(e) {
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});});