问题:在使用jquery时attr("checked") 返回checked或undefined ?
演示代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../js/jquery.js"></script> </head> <body> <div><input type="checkbox"id="box1"/></div> <div><input type="checkbox" id="box2"/></div> </body> <script> $("#box1").click(function(){ console.log($(this).attr("checked")); }); </script> </html>
运行结果如下:
一、思考:
1、既然checked是属性,那么根据attr()肯定可以获得checked属性的值;
2、我们想象中的样子是,在选中时应该返回true ,在取消时应该返回false;
3、但是通过attr()方法返回的是undefined结果;
4、但当我们使用js中的this.checked的时候,返回的结果就是我们想象中的样子
二、推论 :jquery中的attr()方法不能获得checked属性的值;
三、验证:百度查询发现很多学者出现了相同的问题
原因:
版本的升级引起的问题。
四、解决办法:使用prop()方式设置或者更改checked的值
代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../js/jquery.js"></script> <style> input{ margin-top: 200px; width: 30px; height: 30px; } </style> </head> <body> <div><input type="checkbox"id="box1"/></div> <div><input type="checkbox" id="box2"/></div> </body> <script> $("#box1").click(function(){ $("#box2").prop("checked",$(this).prop("checked")) }); </script> </html>