当在网页中处理多个复选框时，经常需要实现一个“全选/全不选”的功能，以便用户可以方便地选择或取消选择所有选项，使用 JavaScript 可以很容易地实现这一功能，下面是一个简单的示例，展示如何使用 JavaScript 来实现 checkbox 的全选和全不选。
假设我们有以下 HTML 代码，其中包含多个复选框和一个用于全选/全不选的复选框：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Checkbox 全选示例</title>
</head>
<body>
<h2>Checkbox 全选示例</h2>
<form>
<label>
<input type="checkbox" id="selectAll"> 全选
</label>
<br><br>
<label>
<input type="checkbox" class="item"> 选项 1
</label>
<br>
<label>
<input type="checkbox" class="item"> 选项 2
</label>
<br>
<label>
<input type="checkbox" class="item"> 选项 3
</label>
<br>
<label>
<input type="checkbox" class="item"> 选项 4
</label>
</form>
<script>
document.getElementById('selectAll').addEventListener('change', function() {
var checkboxes = document.querySelectorAll('.item');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
</script>
</body>
</html>在这个示例中，我们有一个 id 为selectAll 的复选框，用于控制其他复选框的选中状态，我们还有几个 class 为item 的复选框，这些是需要被控制的复选框。
JavaScript 部分使用了addEventListener 方法来监听selectAll 复选框的change 事件，当selectAll 复选框的状态发生变化时，脚本会遍历所有 class 为item 的复选框，并将它们的checked 属性设置为与selectAll 复选框相同的值。
这样，当用户点击“全选”复选框时，所有的选项复选框都会被选中或取消选中，具体取决于“全选”复选框的状态。
为了更清晰地展示这个功能，我们可以将其放入一个表格中，如下所示：
| 操作 | “全选”复选框 | 选项复选框 1 | 选项复选框 2 | 选项复选框 3 | 选项复选框 4 |
| 初始状态 | 未选中 | 未选中 | 未选中 | 未选中 | 未选中 |
| 点击“全选” | 选中 | 选中 | 选中 | 选中 | 选中 |
| 再次点击“全选” | 未选中 | 未选中 | 未选中 | 未选中 | 未选中 |
通过这种方式，我们可以很方便地实现 checkbox 的全选和全不选功能。
FAQs:
Q1: 如何更改“全选”复选框的初始状态？
A1: 你可以通过在 HTML 中设置checked 属性来更改“全选”复选框的初始状态，如果你想让“全选”复选框在页面加载时默认被选中，你可以将<input type="checkbox" id="selectAll" checked>，这样，当页面加载时，“全选”复选框将被默认选中，并且所有的选项复选框也会被选中。
Q2: 如果我只想选择部分复选框，而不是全部，该怎么办？
A2: 这个示例中的代码只会影响 class 为item 的复选框，如果你只想选择部分复选框，你可以给那些复选框添加不同的 class 或 id，然后在 JavaScript 中只遍历那些特定的复选框，你可以给不想被“全选”复选框影响的复选框添加一个不同的 class，如not-item，然后在 JavaScript 中只遍历 class 为item 的复选框。
各位小伙伴们，我刚刚为大家分享了有关“checkbox全选js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
