代碼直接放在HTML/CSS/Javascript在線代碼運行中頁面即可顯示，不理解的地方可以查看注釋或評論區交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS實現復選框全選和全不選</title>
<script type="text/javascript">
window.onload = function() {
// 通過ID獲取到全選按鈕
var checkAll = document.getElementById("checkAll");
// 獲取到name屬性為"hobby"的所有按鈕
var hobby = document.getElementsByName("hobby");
// 點擊按鈕進行全選和全不選
checkAll.onclick = function() {
for (var i = 0; i < hobby.length; i++) {
/* 根據全選按鈕屬性為true/false時
同時將屬性值賦值給每一個"hobby"按鈕 */
hobby[i].checked = checkAll.checked;
}
}
/*當所有其他選項都被選中時，全選按鈕才是選中狀態*/
// 獲取name屬性為"hobby"按鈕的數量
var length = hobby.length;
// 頁面加載完成后此循環用來獲取每一個"hobby"按鈕
for (var i = 0; i < length; i++) {
// 當"hobby"按鈕觸發點擊時間時執行以下函數
hobby[i].onclick = function() {
// 定義一個計數變量
var count = 0;
// 點擊事件觸發后執行此循環
for (var i = 0; i < length; i++) {
// 如果有一個"hobby"復選框被選中，count計數加一
if (hobby[i].checked == true) {
count++;
}
}
/* 當"hobby"復選框被選中數量和"hobby"復選框總數量相同時，
將返回的值true賦值給全選按鈕，反之亦然 */
checkAll.checked = (count == length);
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" id="smoke" />抽煙<br />
<input type="checkbox" name="hobby" id="drink" />喝酒<br />
<input type="checkbox" name="hobby" id="perm" />燙頭
<hr />
<input type="checkbox" name="checkAll" id="checkAll" />全選<br />
</body>
</html>
運行結果：
