今天遇到一个奇怪的问题，使用attr给多选框添加checked属性，无效果。通过浏览器查看元素，发现该属性确实已经添加上了，查找原因半天，终于找出问题。
问题描述
给多选按钮添加选中效果，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的元素。
- 后面+上一遍博客也已经做了介绍，表示兄弟元素，这里是选择兄弟元素里面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>
重点关注圈出来的部分。
image.png
现在呢，我加一个按钮，实现点击一下，就出现checkbox的选中效果。实现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");
}
});
这里实现的功能为，点击一下全选按钮，实现全部选中的功能，上图以明身份：
image.png
出现问题：
点击第一次会选中，之后，一直无效。
分析原因
原来问题出在这行代码上：
$("[name='checbox']").attr("checked",selectall);
查阅资料发现，jquery在1.6之后进行了一些改动，增加了prop属性。当然，对attr属性也做了相关改动，改动如下：
- jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。
- 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。
相关资料见：prop和attr区别API
