我有这个树列表，我检查所有孩子的复选框，如果父母被检查等等，一切都很好，但我遇到了上一个ul 项目03复选框的问题，需要检查是否选中了所有复选框，然后检查父复选框，如果未选中所有复选框，则反之，然后取消选中父检查，例如根据所有检查/全部未选中来切换父复选框。
我有一个jsfiddle http://jsfiddle.net/g40e3nyL/
这就是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();
这就是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>
答案 0 :(得分：0)
这样的东西？
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();
我在http://jsfiddle.net/m8sr515L/分叉你的jsfiddle。
也许不是最优雅的解决方案，但它确实有效。