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:前端坑还真不少,最近写移动端和嵌入式比较多一点。祝大家好运。

推荐阅读更多精彩内容