用原生態的JavaScript操作頁面上的一組checkbox全選/取消全選，邏輯很簡單，實現程式碼也不難寫。但使用jQuery實現則非常簡單，程式碼很簡潔-write less,do more！

jquery版本：1.9

先看看HTML程式碼，很簡單的操作框

1. <div class="checkbox_test">
2.   <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
3.   <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
4.   <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
5.   <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
6.   <input type="checkbox" name="chk_all" id="chk_all" />全選/取消全選
7. </div>

引入jquery庫

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

對於checkbox的選擇，實際上就是添加了一個屬性：checked，不管後面有沒有值，都是選中狀態，在程式裡面，如果checked值純在，就是true，不存在就是false。於是就可以用下面的這個程式碼：

1. //全選/反選
2. $("#chk_all").on('click', function(){
3. if($(".chk_all").attr("checked")){    //判斷chk_all是否被選中
4. $("input[name='chk_list']").attr("checked",false); //反選
5. }else{
6. $("input[name='chk_list']").attr("checked",true);//全選
7. }
8. })

可是，這段執行卻是錯誤的，因為$(“.chk_all”).attr(“checked”)的值是undefined，因為在原始碼裡面沒有這個屬性。

檢視jquery的api手冊，發現了一個prop函式：

—————————-以下函式說明應用自jquery官方api———————————-

prop(name|properties|key,value|fn)

概述

獲取在匹配的元素集中的第一個元素的屬性值。

隨著一些內建屬性的DOM元素或window物件，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤

引數

name

屬性名稱

properties

作為屬性的“名/值對”物件

key,value

屬性名稱，屬性值

key,function(index, attr)

1:屬性名稱。

2:返回屬性值的函式,第一個引數為當前元素的索引值，第二個引數為原先的屬性值。

——————————————以上函式說明應用自jquery官方api————————————–

prop()獲取匹配的元素的屬性值。
這個方法是jquery1.6以後出來的，用來區別之前的.attr()方法.

區別最大的一點就是：布林型的屬性，1.6以後都是用.prop()方法就好了。
這個布林型的屬性，再解釋一下，是屬性值只有true|false的屬性。
還有種情況就是隻新增屬性名，不需要寫屬性值的就可以生效的也同樣使用.prop()方法。比如：checked、disable這樣的，其實它們說到底還是屬於布林型的屬性。

1.新增屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop();
3.其他則使用attr();

那麼

上面的程式碼可以這樣寫：

1. //全選/反選
2. $("#chk_all").on('click', function(){
3. if($(".chk_all").prop("checked")){    //判斷chk_all是否被選中
4. $("input[name='chk_list']").prop("checked",false); //反選
5. }else{
6. $("input[name='chk_list']").prop("checked",true);//全選
7. }
8. })

這樣修改以後，就不會報錯，並且可以執行的很好！