jquery中复选框checked属性

来源：互联网发布：电子标书的软件编辑：程序博客网时间：2024/06/11 04:51

以前看书及学习的时候认为复选框的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" onclick="getcheckbox()">

如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr.

0 0