jquery - 选中所有复选框不起作用

Question

在jsfiddle

代码：

<script type="text/javascript">
    function checkAll() {
    var checked = $("#checkAll").is(':checked');
    $(".check_row").attr("checked", checked);
}
</script>
<div>
    <input type="checkbox" id="checkAll" onclick="checkAll()" />Check All <br />
    <input type="checkbox" class="check_row" />One <br />
    <input type="checkbox" class="check_row" />Two <br />
    <input type="checkbox" class="check_row" />Three <br />
    <input type="checkbox" class="check_row" />Four <br />
    <input type="checkbox" class="check_row" />Five <br />
    <input type="checkbox" class="check_row" />Six <br />    
</div>

“全选”复选框仅适用于第一次。有人可以帮我找出发生了什么问题吗？

Answer 1

改变

$(".check_row").attr("checked", checked);

到

$(".check_row").prop("checked", checked);

见小提琴

Answer 2

1. 由于您使用的是大于 1.6 的 jquery 版本，因此在此属性中不会更改attr为prop
2. 不要多次声明变量如果在函数中声明变量会重复声明变量很多次
3. 你甚至不需要变量和 if else 条件......检查我更新的例子

小提琴演示

var checked

function checkAll() {

    checked = $("#checkAll").is(':checked');

    $(".check_row").prop("checked", checked);

}

更新

小提琴演示

$('#checkAll').on('change',function(){    
    $(".check_row").prop("checked", $(this).is(':checked'));    
});

Answer 3

$('#checkAll').on('change',function(){
    if($(this).is(':checked')){
        $(".check_row").prop("checked", true);
    }
    else{
        $(".check_row").prop("checked", false);
    }
});

JSFiddle

Answer 4

更改此行

    $(".check_row").attr("checked", checked); 

     to

    $(".check_row").attr("checked", true);

小提琴：http: //jsfiddle.net/auXdC/5/

Answer 5

function checkAll() 
{
     var checked = $("#checkAll").is(':checked');

     $(".check_row").prop("checked", true);

    if(!checked)
    {
           $(".check_row").removeAttr("checked");
    }

}

JSFiddle