在使用jquery時attr("checked") 返回checked或undefined 原因以及解決方法
阿新 • • 發佈：2019-01-03
問題：在使用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>