用Set管理多选框的核心是将checkbox的value作为唯一标识存入Set并同步更新。初始化时根据Set设置checked状态；监听change事件增删Set；全选/取消全选批量操作Set和UI；提交时用Array.from(selectedSet)获取选中值，Set具备去重和O(1)查找优势。
用 Set 管理多选框（Checkbox）的已选项，核心是把每个 checkbox 的 value 作为唯一标识存进 Set，并在勾选/取消时同步更新 Set 和 UI 状态。
初始化：从 Set 同步到 Checkbox 状态
页面加载或组件挂载时，遍历所有 checkbox 元素，根据其 value 是否在 Set 中来设置 checked 属性：
const selectedSet = new Set(['apple', 'banana']);
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.checked = selectedSet.has(checkbox.value);
});
监听变更：点击时增删 Set 并保持响应
为每个 checkbox 绑定 change 事件，根据当前勾选状态决定是 add 还是 delete：
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
selectedSet.add(checkbox.value);
} else {
selectedSet.delete(checkbox.value);
}
});
});
批量操作：全选/取消全选快速更新 Set
全选按钮点击时，清空 Set 并重新填入所有可用值；取消全选则清空 Set。同时同步更新所有 checkbox 的 checked 状态：
立即学习“Java免费学习笔记（深入）”；
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
const selectAll = document.getElementById('select-all');
selectAll.addEventListener('change', () => {
if (selectAll.checked) {
selectedSet.clear();
allCheckboxes.forEach(cb => {
selectedSet.add(cb.value);
cb.checked = true;
});
} else {
selectedSet.clear();
allCheckboxes.forEach(cb => cb.checked = false);
}
});
获取与提交：用 Set.values() 转为数组提交
表单提交或需要获取当前选中项时，直接转成数组即可（Set 本身不支持索引访问）：
function getSelectedValues() {
return Array.from(selectedSet); // 或 [...selectedSet]
}
// 提交示例
form.addEventListener('submit', e => {
e.preventDefault();
const data = { items: getSelectedValues() };
fetch('/api/selection', { method: 'POST', body: JSON.stringify(data) });
});
Set 天然去重、查找快（O(1)），比用数组 includes 或对象键判断更简洁高效。只要确保每个 checkbox 的 value 唯一且稳定，整个集合管理就清晰可控。
