jquery之checkbox全选（取消）

开开心心写程序，然后就掉进坑里面了。今天准备写一点web的代码，然后选择了jquery作为前端js框架。在实现checkbox的全选的时候掉进了一个坑里面。主要是jquery中的attr()和prop()问题。接下来我们一起看代码。

1、 问题代码演示：

以下的示例代码，乍一看是没有什么毛病的。第一次运行可以顺利的选中所有的checkbox，然后也能完全取消。当进行第二次全选的时候（第三次点击checkbox）奇怪的事情发生了，页面没有展示我们预期的效果。我们先看如下代码，然后F12审查元素：

    //checkbox全选
    $("#checkAll").on("click", function () {
        //检查checkbox是否选中
        if ($(this).is(":checked")) {
            //选中
            $("input[name='checkList']").attr("checked",true);
        } else {
            //取消选中
            $("input[name='checkList']").attr("checked",false);
        }
    });

表格中的checkbox元素

从上图中我们不难看出元素的属性值已经被修改，但是页面却没有发生任何的改变。这究竟是什么问题呢？我们接着看正确的代码：

    //checkbox全选
    $("#checkAll").on("click", function () {
        //检查checkbox是否选中
        if ($(this).is(":checked")) {
            //全部选中
            $("input[name='checkList']").prop("checked",true);
        } else {
           //全部取消
            $("input[name='checkList']").prop("checked",false);
        }
    });

2、探究原因

原来jquery团队在1.6的版本中修改了attr()方法。Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。

PS：前端坑还真不少，最近写移动端和嵌入式比较多一点。祝大家好运。