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 example

还有一个问题：

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

Answer 1

由于checked是属性，您需要使用.prop()代替.attr()

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

Updated Fiddle，好读.prop() vs .attr()

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

Answer 2

试试这个：用户＆＃39; prop＆＃39;而不是属性，你可以检查所有或取消选中所有主要复选框的检查条件。此外，您可以选中所有复选框的计数以选中/取消选中主复选框。见下文

注意：当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

JQuery：Checkbox Chain无法正常工作

2 个答案: