今天遇到一个奇怪的问题，使用attr给多选框添加checked属性，无效果。通过浏览器查看元素，发现该属性确实已经添加上了，查找原因半天，终于找出问题。

问题描述

给多选按钮添加选中效果，css代码如下：

.radio:checked + .radio-wrapper-cube .radio-label-cube {
    background: url('../img/loss_riskmind_checked.png');
    background-repeat: no-repeat;
}

这里顺便介绍一下该css干了些什么事儿：

1. 首先是class为radio的元素，后面跟:checked表示选中的class为radio的元素。
2. 后面+上一遍博客也已经做了介绍，表示兄弟元素，这里是选择兄弟元素里面class为radio-wrapper-cube的元素。
3. 后面则表示子元素里面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属性也做了相关改动，改动如下：

1. jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。
2. 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

相关资料见：prop和attr区别API