检查所有复选框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); 
    } 
}); 

DEMO：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应该是：在检查3个复选框

单复选框会选择和取消。

<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> 

希望这有助于某人，因为它为我做了。