問題
在寫前端的時候芝加，有一個需求是要用 js 代碼動態(tài)改變復選框 checkbox 的選中狀態(tài)瓮顽。我的思路是通過改變checkbox元素的checked屬性來實現(xiàn)頁面上復選框是否選中的切換卧抗。
一開始的方法是通過jquery的attr()和removeAttr()方法來完成對元素checked屬性的添加與修改啊掏，代碼如下：
leader = $('#leader_modify');
if(is_leader == '1'){
leader.attr('checked', 'checked');
}else{
leader.removeAttr('checked')
}
這樣子寫是基本可以完成checkbox的狀態(tài)切換，但會有一個bug：切換在一開始是正常的禾唁，但當我點擊了一次復選框以后效览，之前的狀態(tài)切換就不起作用了（无切。。這不是坑爹嗎Ｘね鳌哆键？）
原因
經(jīng)過一番漫無目的的搜索資料，我仔細研究了下 jquery的 .attr()
方法瘦锹，attr() 可以獲取匹配的元素集合中的第一個元素的屬性的值籍嘹，或者設置每一個匹配元素的一個或多個屬性。而這個屬性的英文為 Attribute弯院，它有別于Property辱士。
- property是DOM中的屬性，是JavaScript里的對象
- attribute是HTML標簽上的特性听绳，它的值只能夠是字符串
boolean attributes颂碘，比如：checked，僅被設置成默認值或初始值椅挣。在一個checkbox的元素中头岔，checked attributes在頁面加載的時候就被設置，而不管checkbox元素是否被選中鼠证。
properties就是瀏覽器用來記錄當前值的東西峡竣。正常情況下，properties反映它們相應的attributes(如果存在的話)名惩。但這并不是boolean attriubutes的情況澎胡。當用戶點擊一個checkbox元素或選中一個select元素的一個option時孕荠，boolean properties保持最新娩鹉。但相應的boolean attributes是不一樣的，正如上面所述稚伍，它們僅被瀏覽器用來保存初始值弯予。
解決方法
由此可見，通過改變 checked 這個 attribute 來實現(xiàn)checkbox 狀態(tài)的動態(tài)改變是不可行的个曙，應該通過設置 checkbox 的 property 屬性 來實現(xiàn)锈嫩。jquery 提供了.prop() 方法。
leader = $('#leader_modify');
if(is_leader == '1'){
leader.prop('checked', true)
}else{
leader.prop('checked', false);
}
總結(jié)
attributes 和 properties之間的差異在特定情況下是很重要垦搬。jQuery 1.6之前 呼寸，.attr()方法在取某些 attribute 的值時，會返回 property 的值猴贰，這就導致了結(jié)果的不一致对雪。從 jQuery 1.6 開始， .prop()方法返回 property 的值,而 .attr() 方法返回 attributes 的值米绕。
通過prop()來獲取輸入框里面的值永遠都是和它里面的值同步的瑟捣，而通過attr()老獲取輸入框里面的值一直都是在html標簽里面設置的值馋艺。
根據(jù)官方的建議：具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()迈套，其他的使用 attr()捐祠。
參考資料
如有疑問或建議，歡迎來我的博客與我討論桑李。
