jquery 使用attr() 函数对复选框无效的原因

　　复选框是网站开发的时候经常用到的网页标签之一，常见的在页面上对复选框的操作包括取值和修改复选框的状态。在jquery中，常见的操作标签的值得函数为attr，然而在操作复选框的时候，通常采用的却是prop，因为关于复选框的值，来自于properties而不是attributes。

　　举个例子：

　　以下代码是获取checkbox的值，并在控制台打印

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
     <script type="text/javascript">
         $(function () {
             $("#checkAll").click(function () {
                 console.log($(this).attr("checked"))
                 console.log($(this).prop("checked"))
             });
         });
     </script>
 </head>
 <body>
     <input type="checkbox" id="checkAll">全选<br/> </body>
 </html>

　　打印的结果如图，通过attr获取到的checkbox值为undefined，prop获取到的值为true

　　如果将checkbox的默认值设置为checked

<input type="checkbox" id="checkAll" checked>全选<br/>

　　那么得到的结果，attr获得的结果永远是checked，而prop获得的结果则还是一个布尔值。

　　会出现这样的情况，在于attributes和properties之间的差异，函数attr获取的值来自于attributes，然而当我们在控制台查看checkbox对象的时候会发现checked的值不是在attributes中，而是在properties。

　　通过原生js的函数，我们也可以得出相同的结果。

console.log(document.getElementById("checkAll").getAttribute('checked'));
console.log(document.getElementById("checkAll").checked);//获取property 值

　　所以，当我们对checkbox进行取值的时候，使用attr()函数获取到的值会是undefined，只能通过prop获取。

　　但是，当我们使用jquery对checkbox进行赋值的时候，使用 $(“#checkAll”).attr(“checked”,true);在IE下却是可以出现效果的。不过在谷歌浏览器下则会出现另一种情况。在谷歌浏览器下，第一次赋值能够产生效果，但是在进行第二次赋值的时候，你通过查看源代码，可以发现赋值虽然在标签处会产生效果，可是在谷歌浏览器里面是显示不出来的。