[英]Checking parent checkbox doesn't check child
I am trying to get some jquery to check the child checkbox when the parent is selected, however it is not happening and I can't for the life of me figure out what the deal is. 当尝试选择父项时,我试图获取一些jquery来检查子项复选框,但是这没有发生,我一生无法弄清楚这是什么。
Code: 码:
$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
$('#check-all-child').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('#check-all-child').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
HTML: HTML:
<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" id="check-all-child">hello2
Use class instead of id. 使用类而不是id。
HTML HTML
<input type="checkbox" id="check-all-parent">hello
<br />
<input type="checkbox" class="check-all-child">hello2
jQuery jQuery的
$('#check-all-parent').click(function(event) {
if(this.checked) { // check select status
$('.check-all-child').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.check-all-child').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
Your code works, you just need to add jQuery in the jsfiddle. 您的代码有效,您只需要在jsfiddle中添加jQuery。 Click the first drop-down under Frameworks & Extensions, and choose a jQuery library (like this: jsfiddle.net/evx9y8g9/3 ).
单击Frameworks&Extensions下的第一个下拉列表,然后选择jQuery库(例如: jsfiddle.net/evx9y8g9/3 )。
Your JS could be a bit cleaner though: 您的JS可能会更干净一些:
$('#check-all-parent').click(function() {
$("#check-all-child").prop("checked", $(this).prop("checked"));
});
No need to use loop
. 无需使用
loop
。 Use class
instead of id
and in js: 在js中使用
class
而不是id
:
$(".check-all-parent").on("click", function() { $(".check-all-child").prop("checked", $(this).prop("checked")); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="check-all-parent">hello <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2 <br /> <input type="checkbox" class="check-all-child">hello2
If you have parent an child checkboxes, consider using a nested list: 如果您有父级和子级复选框,请考虑使用嵌套列表:
<ul id="checkboxes">
<li>
<input type="checkbox"> hello
<ul>
<li> <input type="checkbox"> hello1 </li>
<li> <input type="checkbox"> hello2 </li>
</ul>
</li>
</ul>
And then use 然后用
$('#checkboxes input[type="checkbox"]').on('change', function() {
$(this)
.nextAll('ul')
.find('input[type="checkbox"]')
.prop('checked', this.checked);
});
$('#checkboxes input[type="checkbox"]').on('change', function() { $(this) .nextAll('ul') .find('input[type="checkbox"]') .prop('checked', this.checked); });
ul { list-style: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="checkboxes"> <li> <input type="checkbox"> hello <ul> <li> <input type="checkbox"> hello1 <ul> <li> <input type="checkbox"> hello11 </li> </ul> </li> <li> <input type="checkbox"> hello2 </li> <li> <input type="checkbox"> hello3 </li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.