开开心心写程序，然后就掉进坑里面了。今天准备写一点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：前端坑还真不少，最近写移动端和嵌入式比较多一点。祝大家好运。
