在JavaScript中，復選框全選是一個非常常見的功能，特別是在表單提交中，全選可以避免用戶漏選重要的選項。在本文中，我們將詳細介紹如何使用JavaScript實現復選框全選功能。

首先，我們需要明確一點，全選復選框并不需要在每個復選框中都添加事件監聽器。相反，我們只需要在全選復選框中添加一個事件監聽器即可。當用戶單擊全選復選框時，我們可以通過遍歷所有復選框來實現選擇或取消選擇。以下是一個示例：

<form>
<input type="checkbox" name="check-all" id="check-all">全選<br>
<input type="checkbox" name="option1" id="option1">選項1<br>
<input type="checkbox" name="option2" id="option2">選項2<br>
<input type="checkbox" name="option3" id="option3">選項3<br>
<input type="checkbox" name="option4" id="option4">選項4<br>
</form>
<script>
var checkAll = document.getElementById("check-all");
var options = document.getElementsByTagName("input");
checkAll.onclick = function() {
for (var i = 0; i < options.length; i++) {
if (options[i].type == "checkbox") {
options[i].checked = this.checked;
}
}
}
</script>

在上面的代碼中，我們首先通過ID獲取全選復選框和通過標簽名獲取所有復選框。然后，我們在全選復選框上添加一個單擊事件監聽器，在單擊事件中遍歷所有復選框，并將它們的checked屬性設置為全選復選框的選中狀態。

此外，我們還可以為單個復選框添加事件監聽器，以更新全選復選框的狀態。如果所有復選框都被選中，則全選復選框應該被選中。以下是一個示例：

<form>
<input type="checkbox" name="check-all" id="check-all">全選<br>
<input type="checkbox" name="option1" id="option1">選項1<br>
<input type="checkbox" name="option2" id="option2">選項2<br>
<input type="checkbox" name="option3" id="option3">選項3<br>
<input type="checkbox" name="option4" id="option4">選項4<br>
</form>
<script>
var checkAll = document.getElementById("check-all");
var options = document.getElementsByTagName("input");
checkAll.onclick = function() {
for (var i = 0; i < options.length; i++) {
if (options[i].type == "checkbox") {
options[i].checked = this.checked;
}
}
}
for (var i = 0; i < options.length; i++) {
if (options[i].type == "checkbox" && options[i] != checkAll) {
options[i].onclick = function() {
var allChecked = true;
for (var j = 0; j < options.length; j++) {
if (options[j].type == "checkbox" && options[j] != checkAll && !options[j].checked) {
allChecked = false;
break;
}
}
checkAll.checked = allChecked;
}
}
}
</script>

在上面的代碼中，我們在遍歷所有復選框時將全選復選框排除在列表之外，并為每個復選框（不包括全選）添加一個單擊事件監聽器。在事件處理程序中，我們遍歷所有復選框，如果其中有一個不被選中，則全選復選框的狀態將被更新。

在實際開發中，我們還可以通過類名或其他屬性來獲取復選框，以滿足不同的需求。使用JavaScript實現復選框全選功能非常簡單，只需要遍歷所有復選框并設置它們的checked屬性即可。希望本文對你有所幫助！