JQuery：复选框链无法正常工作答案

【问题标题】：JQuery: Checkbox Chain not working properlyJQuery：复选框链无法正常工作
【发布时间】：2017-04-27 12:06:34
【问题描述】：

我有复选框的“链”（父复选框和子复选框），问题是：

当第一次点击“父母”复选框时，它运行良好，但之后点击“孩子”时，“父母”复选框并没有按照预期进行。父母正在检查/取消选中除之前按下的孩子之外的孩子。

代码如下：

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 example

还有一个问题：

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

【问题讨论】：

使用.prop() jsfiddle.net/jtx59Lxx/1

标签： javascript jquery html checkbox

【解决方案1】：

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

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

Updated Fiddle，不错的阅读.prop() vs .attr()

如果你想使用.off()，那么建议使用命名空间事件。

【讨论】：

好的，谢谢！

【解决方案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

【讨论】：