jquery選中radio或checkbox的正確姿勢
Intro
前幾天突然遇到一個(gè)問題铃岔，沒有任何征兆的茫孔。隘蝎。，jquery 選中radio button單選框時(shí)睁宰，一直沒有辦法選中肪获，后來查了許多資料，發(fā)現(xiàn)自己的姿勢有問題柒傻。
Issue
我按下面的方式選中 radio 時(shí)孝赫，發(fā)現(xiàn)有時(shí)候會選不中。
<label class="t-radio t-circle-radio t-green-radio"><input type="radio" value="1" onchange="$('#saleInfo').show()" checked="checked" name="isOnSale" />加入</label>
<label class="t-radio t-circle-radio t-green-radio"><input type="radio" value="0" onchange="$('#saleInfo').hide()" name="isOnSale" />不加入</label>
下面是我的 js 代碼
//前面已引用 jquery.js 后文不再贅述
...
$("input[type='radio'][name='isOnSale'][value='1']").attr("checked","checked");
Solution0
區(qū)分 attribute 和 property
attribute 和 property 是不同的
property 是 html 標(biāo)簽固有的屬性红符，而 attribute 多是 html 自定義屬性青柄。
attribute是html文檔上標(biāo)簽屬性，而 property 則是對應(yīng) DOM 元素的自身屬性预侯。
從操作方法上來看致开，attribute可以通過 DOM規(guī)范的 getAttribute 和 setAttribute進(jìn)行獲取修改，而property可以通過對象訪問屬性的方式 . 或者 [" "]來修改獲取萎馅。
jquery 獲取或設(shè)置 attribute 用的是 attr ,獲取或設(shè)置 property 用的是 prop
Property
DOM 節(jié)點(diǎn)是一個(gè)對象双戳，所以它像 JavaScript 的對象一樣可以存儲自定義的屬性和方法。
Attribute
DOM節(jié)點(diǎn)可以通過以下標(biāo)準(zhǔn)方法訪問 HTML 的 attribute
elem.hasAttribute(name) - checks if the attribute exists
elem.getAttribute(name) - gets an attribute value
elem.setAttribute(name, value) - sets an attribute
elem.removeAttribute(name) - removes an attribute
checked 是 input 標(biāo)簽的屬性（property）而不是 attribute 糜芳，參見 http://www.w3school.com.cn/tags/att_input_checked.asp
更多 input 相關(guān)的屬性詳見： http://www.w3school.com.cn/tags/tag_input.asp
Solution1
HACK：mock click
設(shè)置選中之后調(diào)用對象的click()方法飒货，模擬點(diǎn)擊
//toogle
$("input:radio[name='isOnSale'][value='1']").click();
Solution2
設(shè)置 input 的 checked 屬性
原生js
//check
document.getElementsByName("isOnSale")[0].checked = true;
//uncheck
document.getElementsByName("isOnSale")[0].checked = false;
jquery
//
$("input[type='radio'][name='isOnSale'][value='1']").prop("checked",true);
Ｍore
如果你有別的更好的解決方案，歡迎指出峭竣。
如果有什么問題塘辅，歡迎聯(lián)系我 ben121011@126.com
