jquery中checkbox全选bug的全方位解析

    上一个项目中在复选框的全选上遇到了一个很困惑的问题，以前用的好好的jquery代码突然不管用了，最后比对了好多遍，发现唯一不同的就是juquery版本，然后上网查了一下，是juery中版本更新后导致的一些列小bug。

为了能看的简洁明了，先上代码。

html代码:

<div class="like">
        <input type="checkbox" value="篮球"/>篮球
        <input type="checkbox" value="K歌"/>K歌
        <input type="checkbox" value="游泳"/>游泳
        <input type="checkbox" value="足球"/>足球
    </div>
    <br/>
 <input type="checkbox" id="all"/>全选

引用新版本的jquery后出现bug的代码：

$("#all").click(function(){
      alert($(this).attr("checked"));
      if($(this).attr("checked")){
             $(".like :checkbox").attr("checked",true);
      }else{
             $(".like :checkbox").attr("checked",false);
      }
 });

首先郑重声明：以上代码在低版本的jquery版本中绝对好使，且实际应用过。

alert($(this).attr("checked"));

在进一步的调试中，发现上面这行代码弹出的是 undefined（未定义），新的版本中已不支持这样的写法。

然后将以上判断是否选中代码改为：

$(this).is(":checked")

此代码能正确判断是否选中，但是只能被勾选一次第二次就失效了。

为了解决此bug,第二次选中时，在火狐中调试查看时发现checkbox中确实有checked属性，而且，值为checked，但是页面显示仍然为未选中状态

为此先附上bug完全解决后的代码：

$("#all").click(function(){
       if($(this).prop("checked")){
             $(".like :checkbox").prop("checked",true);
       }else{
             $(".like :checkbox").removeAttr("checked",false);
       }
});

在jquery1.6.1的版本中最大变化是增加了prop()方法，顾名思义：properties（性能）,attributes(属性)；基本是相通的，但是新版本中对这两种方法做出了明确的分工，一般用到js其值为boolean类型（例：checked,selected,readonly,disabled等）时,直接改用prop()方法，反之使用attr()方法。

      结论：作为一名初学者，可能很少会有人去分析一些类库版本更新带来了哪些新变化，但是往往这些细微的变化可能就会引起一个很纠结的问题，希望以后自己可以紧跟大神们的脚步Ｏ（∩＿∩）Ｏ