今天遇到一個奇怪的問題，使用attr給多選框添加checked屬性茄蚯，無效果压彭。通過瀏覽器查看元素，發(fā)現(xiàn)該屬性確實(shí)已經(jīng)添加上了渗常，查找原因半天壮不，終于找出問題。
問題描述
給多選按鈕添加選中效果皱碘，css代碼如下：
.radio:checked + .radio-wrapper-cube .radio-label-cube {
background: url('../img/loss_riskmind_checked.png');
background-repeat: no-repeat;
}
這里順便介紹一下該css干了些什么事兒：
- 首先是class為radio的元素忆畅，后面跟:checked表示選中的class為radio的元素。
- 后面+上一遍博客也已經(jīng)做了介紹尸执，表示兄弟元素家凯，這里是選擇兄弟元素里面class為radio-wrapper-cube的元素。
- 后面則表示子元素里面class為radio-label-cube的元素如失。
看一下html代碼：
<td>
<input type="checkbox" style="width:10px;height:10px" class="radio" name="checbox" id="111" value="111">
<div class="radio-wrapper-cube">
<label for="111" class="radio-label-cube" onclick="checkboxfun($(this))"></label>
</div>
</td>
重點(diǎn)關(guān)注圈出來的部分绊诲。
image.png
現(xiàn)在呢，我加一個按鈕褪贵，實(shí)現(xiàn)點(diǎn)擊一下掂之，就出現(xiàn)checkbox的選中效果。實(shí)現(xiàn)js如下：
$("#checkbutton").click(function() {
var maxlength = $("[name='checbox']").length;
var selectindex = 0;
var selectall = true;
$("[name='checbox']:checked").each(function(){
selectindex++;
if(maxlength==selectindex){
selectall = false;
}
});
$("[name='checbox']").attr("checked",selectall);
if(selectall){
$("[name='checbox']").parent().parent().addClass("selected");
}else{
$("[name='checbox']").parent().parent().removeClass("selected");
}
});
這里實(shí)現(xiàn)的功能為脆丁，點(diǎn)擊一下全選按鈕世舰，實(shí)現(xiàn)全部選中的功能，上圖以明身份：
image.png
出現(xiàn)問題：
點(diǎn)擊第一次會選中槽卫，之后跟压，一直無效。
分析原因
原來問題出在這行代碼上：
$("[name='checbox']").attr("checked",selectall);
查閱資料發(fā)現(xiàn)歼培，jquery在1.6之后進(jìn)行了一些改動震蒋，增加了prop屬性。當(dāng)然躲庄，對attr屬性也做了相關(guān)改動查剖，改動如下：
- jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值時噪窘，會返回 property 的值笋庄，這就導(dǎo)致了結(jié)果的不一致。從 jQuery 1.6 開始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值直砂。
- 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應(yīng)使用.prop()方法進(jìn)行取值或賦值菌仁。 在jQuery1.6之前，這些屬性使用.attr()方法取得哆键，但是這并不是元素的attr屬性掘托。他們沒有相應(yīng)的屬性（attributes）瘦锹，只有特性(property)籍嘹。
相關(guān)資料見：prop和attr區(qū)別API
