检查所有复选框jquery

Question

为什么在我的js代码中可以一键点击name:check_all勾选所有复选框？

HTML：

<div id="ss">
    <input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">

jQuery：

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.attr("checked" , true);
    } else {
        checkboxes.attr ( "checked" , false );
    }
});

演示： http://jsfiddle.net/KdaZr/

我的 jQuery 版本是 1.9。

如何解决？

Answer 1

使用prop 方法。当您的标记呈现属性成为元素的属性时，您应该使用 JavaScript 修改元素的属性。

$(document).on('change','input[name="check_all"]',function() {
    $('.idRow').prop("checked" , this.checked);
});

http://jsfiddle.net/GW64e/

请注意，如果input[name="check_all"] 不是动态生成的，则无需委托该事件。

Answer 2

使用.prop，而不是.attr，来改变元素的属性。 .attr 用于 HTML 属性。

http://jsfiddle.net/KdaZr/1/

Answer 3

修复如下：-

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.each(function(){
            this.checked = true;
        });
    } else {
        checkboxes.each(function(){
            this.checked = false;
        });
    }
});

Answer 4

完整的解决方案选择||取消选中复选框 jQuery：

$(document).ready(function() {
  $("#checkedAll").change(function(){
    if(this.checked){
      $(".checkSingle").each(function(){
        this.checked=true;
      })              
    }else{
      $(".checkSingle").each(function(){
        this.checked=false;
      })              
    }
  });

  $(".checkSingle").click(function () {
    if ($(this).is(":checked")){
      var isAllChecked = 0;
      $(".checkSingle").each(function(){
        if(!this.checked)
           isAllChecked = 1;
      })              
      if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }     
    }
    else {
      $("#checkedAll").prop("checked", false);
    }
  });
});

HTML 应该是：

选中三个复选框上的单个复选框将被选中和取消选中。

<input type="checkbox" name="checkedAll" id="checkedAll"></input>

<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>

希望这对某人有所帮助，就像对我一样。