选中/取消选中父复选框，如果使用jQuery时所有取消选中/选中事件
[英]check/uncheck parent checkbox if all uncheck/check event on change with jQuery
问题描述
I have this tree list, I am checking all childrens checkboxes if parent is checked and so on, everything works great, but I am having an issue with the last ul Item 03 checkboxes , need to check if all checkboxes are checked then parent checkbox should be checked and the viceversa if the all checkboxes are unchecked then uncheck parent check, something like the toggle the parent checkbox based on all check/all unchecked. 
我有这个树列表，如果选中了parent，我正在检查所有的儿童复选框，等等，一切正常，但是最后一个ul Item 03复选框存在问题 ，需要检查是否选中了所有复选框，然后父复选框应该如果未选中所有复选框，则反之亦然；如果未选中所有父复选框，则取消选中父复选框，例如，基于所有选中/全部未选中状态切换父复选框。
I have a jsfiddle http://jsfiddle.net/g40e3nyL/ 我有一个jsfiddle http://jsfiddle.net/g40e3nyL/
and this is how the js looks like: 这就是js的样子：
function checks() {
$('input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
var count_checked = checkboxes.filter(":checked").length;
if (count_checked == 0) {
console.log('All checked'); //find parent and uncheck box
} else if(count_checked != checkboxes.length) {
console.log('');
} else {
console.log('all childrens unselected'); //find parent and uncheck box
}
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
});
};
});
} checks();
This is how the html markup looks like: 这是html标记的样子：
<ul>
<li>
item 01<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
1 个解决方案
解决方案1
0 2015-03-19 00:38:55
Something like this? 像这样吗
function checks() {
$('input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
var siblings = $(this).closest('li').siblings().andSelf();
var siblings_checked_count = siblings.find('> label :checked').size();
var parent_checkbox = $(this).closest('ul').prev().find(':checkbox');
console.log(siblings, siblings_checked_count);
var count_checked = checkboxes.filter(":checked").length;
if (count_checked == 0) {
console.log('All checked'); //find parent and uncheck box
} else if(count_checked != checkboxes.length) {
console.log('');
} else {
console.log('all childrens unselected'); //find parent and uncheck box
}
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
});
};
if (!siblings_checked_count) {
parent_checkbox.prop('checked', false).removeAttr('checked');
}
else if (siblings_checked_count === siblings.size()) {
parent_checkbox.prop('checked', true).attr('checked', 'checked');
}
});
}
checks();
I forked your jsfiddle at http://jsfiddle.net/m8sr515L/ . 我在http://jsfiddle.net/m8sr515L/分叉了您的jsfiddle。
Perhaps not the most elegant solution, but it works. 也许不是最优雅的解决方案，但它可以工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
取消选中“全部选中”复选框 - Uncheck a “Check all” Checkbox
选中/取消选中复选框jQuery - Check/Uncheck checkbox jQuery
如何使用jquery更改prettyCheckable复选框（选中并取消选中） - How to change prettyCheckable checkbox with jquery (check and uncheck)
Javascript或Jquery检查并取消选中所有复选框 - Javascript or Jquery to check and uncheck all checkbox
复选框事件仅在选中时显示，不在选中时显示 - checkbox event only on check, not on uncheck
自动选中/取消选中“全部”复选框 - Auto check/uncheck the “All” checkbox
jQuery查找复选框并选中/取消选中它 - jQuery find checkbox and check/uncheck it
Jquery选中并取消选中带有链接的复选框 - Jquery check and uncheck checkbox with a link
jQuery复选框分组-至少单击一个子复选框时取消选中父级，选中所有子复选框时选中父级 - Jquery checkbox grouping - uncheck parent when at least one sub checkbox is clicked, check parent when all are checked
选中复选框是选中或取消选中 - check the checkbox is check or uncheck
相关标签