CSS 如何實現全選？

在網頁開發中，全選功能是一項非常常見的需求。我們可以使用 CSS 通過點擊一個按鈕來實現全選。

<label for="selectAll">全選</label>
<input type="checkbox" id="selectAll" onclick="selectAll()">
<script>
function selectAll() {
var checkboxes = document.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type === 'checkbox') {
checkboxes[i].checked = document.getElementById('selectAll').checked;
}
}
}
</script>

如上代碼所示，我們可以新建一個 checkbox，再使用 JavaScript 來實現全選。當點擊全選按鈕時，會遍歷所有的 input 元素，找到類型為 checkbox 的元素，將它們的選中狀態設置為與全選按鈕相同。

同時，為了使網頁更加友好，我們可以添加一個標簽，讓用戶更方便地點擊全選按鈕。在上面的代碼中，我們就添加了一個 label 標簽，并將其與 checkbox 關聯起來。