JQuery:复选框链无法正常工作

Question

我有复选框的"链"(父复选框和子复选框)，问题是：

当第一次单击"父"复选框时，它运行良好，但是在此之后，当单击"孩子"时，"父"复选框就不会执行预期的操作。父级正在检查/取消选中子项，但之前按下的子项除外。

这是代码：

JavaScript

checks_bind();
function checks_bind(){
$("#x_main").off('click');
$("#x_main").on('click',function(){
var obj   = $(this);
var val = obj.is(':checked');
$("#checks").find("input[type='checkbox']").attr('checked',val);
});
}

.HTML

<input id='x_main' type='checkbox'/>Main<br>
<p>--------------------------------</p>
<div id='checks'>
<input type='checkbox'/>1<br>
<input type='checkbox'/>2<br>
</div>
<p>--------------------------------</p>
<i>1 - Click on 1 or 2 <br>2 - Try <b>Main</b> checkbox. <br>
3 - Main checkbox isn't working</i>

JSFIDDLE 示例

还有一个问题：

在复选框上使用.on('click.namespace')是否好，因为它运行良好？我可以使用.change()方法，但我想在每次调用函数时.on()之前调用.off('click.namespace')(或要取消绑定的内容)。

Answer 1

由于checked是一个属性，因此您需要使用.prop()而不是.attr()

$("#checks").find("input[type='checkbox']").prop('checked', val);

更新的小提琴，很好的阅读 .prop() 与 .attr()

如果要使用.off()则建议使用命名空间事件。

Answer 2

试试这个：用户"prop"而不是属性，您可以根据主复选框的选中条件全部选中或取消选中所有。 此外，您可以选中所有复选框的计数以选中/取消选中主复选框。见下文

注意：当 DOM 准备就绪时绑定单击处理程序，因此用户$(document).ready或$(function(){})

$(function(){
$("#x_main").on("change", function(){
$("#checks").find("input[type='checkbox']").prop("checked",$(this).is(":checked"));
});
$("#checks input[type='checkbox']").on("change", function(){
var total = $("#checks").find("input[type='checkbox']").length;
var checked = $("#checks").find("input[type='checkbox']:checked").length;
$("#x_main").prop("checked",total==checked);
});
});

JSFiddle Demo