jquery 實現復選框的全選操作實例代碼
最近做了個需求，需要實現列表復選框的全選/取消全選操作，由于之前對這塊不是很了解，所以從網上查了一些資料，雖然有各種實現方法，但沒找到直接可以套用的。自己琢磨了下，把功能實現，整理如下。
實現細節如有可改進的地方，不吝賜教。
首先是html部分的代碼，這里有一個表格，表格里面有一些選項：
<div id="list"> <table> <tr><td>選項1<input type="checkbox" name="group" value="1"/></tr> <tr><td>選項2<input type="checkbox" name="group" value="2"/></tr> <tr><td>選項3<input type="checkbox" name="group" value="3"/></tr> </table> </div>全選<input type="checkbox" id="all"/>
接下來是jquery：
<script> $(document).ready(function () { //全選或全不選 $("#all").click(function () { if (this.checked) { $("#list :checkbox").attr("checked", true); } else { $("#list :checkbox").attr("checked", false); } }); //設置全選復選框 $("#list :checkbox").click(function () { allchk(); }); function allchk() { var chknum = $("#list :checkbox").size();//選項總個數 var chk = 0; $("#list :checkbox").each(function () { if ($(this).attr("checked")) { chk++; } }); if (chknum == chk) {//全選 $("#all").attr("checked", true); } else {//不全選 $("#all").attr("checked", false); } } //顯示時執行一次 allchk(); }); </script> 當全選框被點擊時，判斷選中狀態，如果是選中，則為所有選項的復選框設置選中屬性；如果是取消選中，則為所有選項的復選框取消選中屬性。
同時，為每個選項復選框添加判斷，當所有的選項復選框都選中時，全選框自動選中；否則，全選框取消選中。這里通過計數來比較（選項的數量和選中的選項數量），通過each方法來進行遍歷。
最后，在顯示時執行一次，這是確保如果初始狀態就是所有選項都選中的狀態，要保證全選框也是選中的狀態。
新聞熱點
疑難解答
