js实现复选框全选反选

在JavaScript中实现复选框的全选与反选功能，主要涉及到DOM操作和事件监听。以下是实现这一功能的基础概念、优势、类型、应用场景以及示例代码。

基础概念

DOM操作：Document Object Model（文档对象模型），允许JavaScript改变HTML元素的内容、结构和样式。
事件监听：通过监听特定事件（如点击事件），触发相应的函数执行。

优势

用户体验：提供便捷的操作方式，允许用户快速选择或取消选择多个选项。
代码复用：实现一次后，可以在多个页面或项目中重复使用。

类型

全选：点击一个按钮或复选框，选中页面上所有指定的复选框。
反选：点击一个按钮，将所有已选中的复选框变为未选中，反之亦然。

应用场景

表单提交：在提交表单前，允许用户快速选择所有选项。
数据筛选：在展示大量数据的列表中，方便用户进行批量操作。

示例代码

以下是一个简单的HTML和JavaScript代码示例，展示了如何实现复选框的全选与反选功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Select All/Deselect All</title>
<script>
function selectAll() {
    var checkboxes = document.querySelectorAll('input[name="item"]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
    }
}

function deselectAll() {
    var checkboxes = document.querySelectorAll('input[name="item"]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;
    }
}

function toggleSelect() {
    var checkboxes = document.querySelectorAll('input[name="item"]');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !checkboxes[i].checked;
    }
}
</script>
</head>
<body>

<h2>Items List</h2>
<input type="button" value="Select All" onclick="selectAll()">
<input type="button" value="Deselect All" onclick="deselectAll()">
<input type="button" value="Toggle Select" onclick="toggleSelect()">

<ul>
    <li><input type="checkbox" name="item"> Item 1</li>
    <li><input type="checkbox" name="item"> Item 2</li>
    <li><input type="checkbox" name="item"> Item 3</li>
    <!-- Add more items as needed -->
</ul>

</body>
</html>