选中所有复选框不起作用

Question

在jsfiddle

中

CODE：

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

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

Answer 1

更改

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

到

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

请参阅Fiddle

Answer 2

1. 由于您使用的jquery版本大于1.6，因此
中的属性从attr更改为prop
2. 如果在函数中声明变量，它将多次声明变量
3. 你甚至不需要变量，如果还有其他条件......请查看我的更新示例

FIDDLE DEMO

var checked

function checkAll() {

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

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

}

更新

FIDDLE DEMO

$('#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