溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery 實現(xiàn)復選框的全選操作實例代碼
最近做了個需求，需要實現(xiàn)列表復選框的全選/取消全選操作，由于之前對這塊不是很了解，所以從網(wǎng)上查了一些資料，雖然有各種實現(xiàn)方法，但沒找到直接可以套用的。自己琢磨了下，把功能實現(xiàn)，整理如下。
實現(xiàn)細節(jié)如有可改進的地方，不吝賜教。
首先是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();//選項總個數(shù)
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).attr("checked")) {
chk++;
}
});
if (chknum == chk) {//全選
$("#all").attr("checked", true);
} else {//不全選
$("#all").attr("checked", false);
}
}
//顯示時執(zhí)行一次
allchk();
});
</script>
當全選框被點擊時，判斷選中狀態(tài)，如果是選中，則為所有選項的復選框設置選中屬性；如果是取消選中，則為所有選項的復選框取消選中屬性。
同時，為每個選項復選框添加判斷，當所有的選項復選框都選中時，全選框自動選中；否則，全選框取消選中。這里通過計數(shù)來比較（選項的數(shù)量和選中的選項數(shù)量），通過each方法來進行遍歷。
最后，在顯示時執(zhí)行一次，這是確保如果初始狀態(tài)就是所有選項都選中的狀態(tài)，要保證全選框也是選中的狀態(tài)。
參考：jquery中checkbox使用方法簡單實例演示
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
