在前端開發中，全選和反選功能是非常常見的需求。無論是在表格、列表還是復選框組中，用戶通常希望能夠通過一個按鈕快速選擇或取消選擇所有選項。本文將詳細介紹如何使用JavaScript實現全選和反選功能，并提供完整的代碼示例。
全選功能是指用戶可以通過點擊一個“全選”按鈕，一次性選擇所有選項。例如，在一個包含多個復選框的列表中，點擊“全選”按鈕后，所有復選框都會被選中。
反選功能是指用戶可以通過點擊一個“反選”按鈕，將當前選中的選項取消選擇，同時將未選中的選項選中。例如，在一個包含多個復選框的列表中，點擊“反選”按鈕后，所有已選中的復選框會被取消選擇，而未選中的復選框會被選中。
首先，我們需要創建一個包含多個復選框的HTML結構。以下是一個簡單的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全選和反選功能</title>
</head>
<body>
<h1>全選和反選功能示例</h1>
<input type="checkbox" id="selectAll"> 全選<br>
<input type="checkbox" class="item"> 選項1<br>
<input type="checkbox" class="item"> 選項2<br>
<input type="checkbox" class="item"> 選項3<br>
<input type="checkbox" class="item"> 選項4<br>
<input type="checkbox" class="item"> 選項5<br>
<button onclick="selectAll()">全選</button>
<button onclick="invertSelection()">反選</button>
<script src="script.js"></script>
</body>
</html>
接下來，我們使用JavaScript來實現全選功能。我們首先需要獲取“全選”復選框和所有選項復選框的引用，然后為“全選”復選框添加事件監聽器，當“全選”復選框被選中時，將所有選項復選框的狀態設置為選中。
// script.js
function selectAll() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
}
document.getElementById('selectAll')：獲取“全選”復選框的引用。document.querySelectorAll('.item')：獲取所有選項復選框的引用。itemCheckboxes.forEach(checkbox => { checkbox.checked = selectAllCheckbox.checked; })：遍歷所有選項復選框，并將它們的狀態設置為與“全選”復選框相同。反選功能的實現與全選功能類似，我們需要遍歷所有選項復選框，并將它們的狀態取反。
// script.js
function invertSelection() {
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}
itemCheckboxes.forEach(checkbox => { checkbox.checked = !checkbox.checked; })：遍歷所有選項復選框，并將它們的狀態取反。以下是完整的HTML和JavaScript代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全選和反選功能</title>
</head>
<body>
<h1>全選和反選功能示例</h1>
<input type="checkbox" id="selectAll"> 全選<br>
<input type="checkbox" class="item"> 選項1<br>
<input type="checkbox" class="item"> 選項2<br>
<input type="checkbox" class="item"> 選項3<br>
<input type="checkbox" class="item"> 選項4<br>
<input type="checkbox" class="item"> 選項5<br>
<button onclick="selectAll()">全選</button>
<button onclick="invertSelection()">反選</button>
<script>
function selectAll() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
}
function invertSelection() {
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}
</script>
</body>
</html>
在實際應用中，用戶可能會手動選擇或取消選擇某些選項，此時“全選”復選框的狀態應該隨之更新。我們可以為每個選項復選框添加事件監聽器，當選項復選框的狀態發生變化時，檢查是否所有選項都被選中，并相應地更新“全選”復選框的狀態。
// script.js
function updateSelectAll() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked);
selectAllCheckbox.checked = allChecked;
}
function init() {
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateSelectAll);
});
}
init();
Array.from(itemCheckboxes).every(checkbox => checkbox.checked)：將NodeList轉換為數組，并檢查是否所有選項復選框都被選中。selectAllCheckbox.checked = allChecked：根據檢查結果更新“全選”復選框的狀態。checkbox.addEventListener('change', updateSelectAll)：為每個選項復選框添加change事件監聽器，當選項復選框的狀態發生變化時，調用updateSelectAll函數。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全選和反選功能</title>
</head>
<body>
<h1>全選和反選功能示例</h1>
<input type="checkbox" id="selectAll"> 全選<br>
<input type="checkbox" class="item"> 選項1<br>
<input type="checkbox" class="item"> 選項2<br>
<input type="checkbox" class="item"> 選項3<br>
<input type="checkbox" class="item"> 選項4<br>
<input type="checkbox" class="item"> 選項5<br>
<button onclick="selectAll()">全選</button>
<button onclick="invertSelection()">反選</button>
<script>
function selectAll() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
}
function invertSelection() {
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
updateSelectAll();
}
function updateSelectAll() {
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item');
const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked);
selectAllCheckbox.checked = allChecked;
}
function init() {
const itemCheckboxes = document.querySelectorAll('.item');
itemCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateSelectAll);
});
}
init();
</script>
</body>
</html>
通過本文的介紹，我們學習了如何使用JavaScript實現全選和反選功能。我們首先創建了一個包含多個復選框的HTML結構，然后使用JavaScript實現了全選和反選功能。最后，我們進一步優化了代碼，使得“全選”復選框的狀態能夠動態更新。希望本文能夠幫助你更好地理解和實現全選和反選功能。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
