開開心心寫程序淑玫，然后就掉進坑里面了酣溃。今天準備寫一點web的代碼豫领，然后選擇了jquery作為前端js框架矩屁。在實現(xiàn)checkbox的全選的時候掉進了一個坑里面辟宗。主要是jquery中的attr()和prop()問題。接下來我們一起看代碼吝秕。
1泊脐、 問題代碼演示：
以下的示例代碼，乍一看是沒有什么毛病的烁峭。第一次運行可以順利的選中所有的checkbox容客，然后也能完全取消。當進行第二次全選的時候（第三次點擊checkbox）奇怪的事情發(fā)生了约郁，頁面沒有展示我們預(yù)期的效果缩挑。我們先看如下代碼，然后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元素
從上圖中我們不難看出元素的屬性值已經(jīng)被修改鬓梅，但是頁面卻沒有發(fā)生任何的改變供置。這究竟是什么問題呢？我們接著看正確的代碼：
//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社區(qū)中引起了一些混亂谎僻，因為在1.6之前的所有版本中都使用一個方法(.attr())來處理attributes和properties娄柳。但是老的.attr()方法有一些bug，很難維護艘绍。jQuery1.6.1對Attributes模塊進行了更新赤拒，并且修復(fù)了幾個bug。
PS：前端坑還真不少，最近寫移動端和嵌入式比較多一點挎挖。祝大家好運这敬。
