jquery中复选框checked属性

最新推荐文章于 2024-04-01 19:33:10 发布

catherineZhang

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量4k

点赞数

分类专栏：编程文章标签： jquery web前端 js checkbox

本文链接：https://blog.csdn.net/CatherineZhang0815/article/details/46708349

版权

编程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以前看书及学习的时候认为复选框的checked属性设置就是用attr（）方法设置checked的属性，看来知识还是停留在表面。我的确看《锋利的jQuery》时候敲过代码，但真的是没好好斟酌，知识没深挖。

这里我也想说这本书中5.1.3的复选框应用的例子确实也有问题。它设置checked属性时讲的就是:(初始化时input元素未设置checked属性)

$("[name=items]:checkbox").attr('checked',true); // 勾选全选按钮的话，获取$("[name=items]:checkbox")的checked值是checked，而不是true；

$("[name=items]:checkbox").attr('checked',false); //去勾选时，获取$("[name=items]:checkbox")的checked值是undefined；

完成代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>j3</title>
</head>
<body>
<input id="checkAll" type="checkbox" value="全选/全不选" /><br />
<input type="checkbox" name="items" value="1" />
<input type="checkbox" name="items" value="2" />
<input type="checkbox" name="items" value="3" />
<input type="checkbox" name="items" value="4" />
<input type="checkbox" name="items" value="5" />

<script src="lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('#checkAll').click(function(){
    if(this.checked){
        $("[name=items]:checkbox").attr('checked',true);
    }else{
        $("[name=items]:checkbox").attr('checked',false);
    }
})

</script>
</body>
</html>

但是这样勾选id为checkAll的checkbox时，会打印出 “checked” , 如果取消打勾会打印出 "undefined" ；实验证明Jquery获取checked的值得打印出"true"是错误的。
而且发现Jquery获取已经被勾上的checkbox，永远都是"checked" ；

解决办法：

1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase

<body>
<input id="checkAll" type="checkbox" value="全选/全不选" /><br />
<input type="checkbox" name="items" value="1" />
<input type="checkbox" name="items" value="2" />
<input type="checkbox" name="items" value="3" />
<input type="checkbox" name="items" value="4" />
<input type="checkbox" name="items" value="5" />

<script src="lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('#checkAll').click(function(){
    $("[name=items]:checkbox").prop('checked',this.checked);
    
    /*if(!this.checked){
        $("[name=items]:checkbox").prop('checked',false);
    }else{
        $("[name=items]:checkbox").prop('checked',true);
    }*/
})

</script>
</body>

2.还是用document.get获取吧：

<script>
    function getcheckbox(){
        var test = document.getElementById("checkbox").checked;
        alert(test);
    }
</script>
<input type="checkbox" name="checkbox" id="checkbox">
<input type="button" id="button" value="Click Me" οnclick="getcheckbox()">