復選框是網站開發的時候經常用到的網頁標簽之一，常見的在頁面上對復選框的操作包括取值和修改復選框的狀態。在jquery中，常見的操作標簽的值得函數為attr，然而在操作復選框的時候，通常采用的卻是prop，因為關於復選框的值，來自於properties而不是attributes。
舉個例子：
以下代碼是獲取checkbox的值，並在控制台打印
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 $("#checkAll").click(function () { 10 console.log($(this).attr("checked")) 11 console.log($(this).prop("checked")) 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 <input type="checkbox" id="checkAll">全選<br/> 18 19 </body> 20 </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下卻是可以出現效果的。不過在谷歌瀏覽器下則會出現另一種情況。在谷歌瀏覽器下，第一次賦值能夠產生效果，但是在進行第二次賦值的時候，你通過查看源代碼，可以發現賦值雖然在標簽處會產生效果，可是在谷歌瀏覽器里面是顯示不出來的。
所以才會導致很多朋友在實現全選功能的時候用了attr之后，第一次全選可以實現，可是第二次全選卻沒辦法實現的現象
綜上所述，如果使用jquery,應使用prop方法來獲取和設置checked屬性，不應使用attr.