[英]Checking all immediate child checkboxes onclicking parent checkbox using JQuery
I have a list in my html code where onclick of parent checkbox, the immediate child checkboxes should be checked. 我的html代码中有一个列表,其中单击父复选框,应检查直接子复选框。
<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>
I tried many ways to check only the immediate children. 我尝试了很多方法来检查直接的孩子。 But none of them worked.
但它们都没有奏效。 These are few ways:
这几种方式:
Tried using .siblings() [Found this solution on stackoverflow only] 尝试使用.siblings()[仅在stackoverflow上找到此解决方案]
function fnTest(check) { if ($(check).is(':checked')) { $(check).siblings('.example').find('.child').attr("checked", true); } else { $(check).siblings('.example').find('.child').attr("checked", false); } }
Here the first list works properly. 这里第一个列表正常工作。 Again when clicked on second list it checks the 3rd list children too.
再次单击第二个列表时,它也检查第三个列表子项。
function fnTest(check) {
if ($(check).is(':checked')) {
var classParent = "." + $(check).attr('class');
$(classParent).attr("checked", true);
}
}
It would be great if someone could point out my mistake. 如果有人可以指出我的错误,那就太好了。
You can do this by using jQuery. 你可以使用jQuery来做到这一点。 First of all remove
onchange="fnTest(this);"
首先删除
onchange="fnTest(this);"
from parent checkbox. 从父复选框。 Bind change event for parent checkbox like below :
为父级复选框绑定更改事件,如下所示:
$(function(){
$('.parent').click(function(){
$(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
});
});
try 尝试
function fnTest(check) {
$(check).closest("ul").find(":checkbox").prop("checked",check.checked);
}
If you want only direct children use like this 如果你只想让直接的孩子这样使用
function fnTest(check) {
$(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);
}
NOTE : use latest version in jquery, and also id should be unique 注意:在jquery中使用最新版本,id也应该是唯一的
From your first try of using siblings(). 从你第一次尝试使用兄弟姐妹()。 You can change to the following:
您可以更改为以下内容:
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);
}
}
By using this it checks only the first children. 通过使用它,它只检查第一个孩子。 And also change your .attr to .prop
并将.attr更改为.prop
// OK tested //好测试了
$(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);
});});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.