以前看书及学习的时候 认为复选框的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()">
如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.