最近做了個需求,需要實現列表複選框的全選/取消全選操作,由於之前對這塊不是很瞭解,所以從網上查了一些資料,雖然有各種實現方法,但沒找到直接可以套用的。自己琢磨了下,把功能實現,整理如下。
實現細節如有可改進的地方,不吝賜教。
首先是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方法來進行遍歷。
最後,在顯示時執行一次,這是確保如果初始狀態就是所有選項都選中的狀態,要保證全選框也是選中的狀態。