用Set处理多选框的核心是收集勾选value并自动去重，配合DOM查询和事件监听联动：获取时筛选checked项建Set；change事件中add/delete动态更新；可转数组或字符串提交，支持has快速查值，全选/取消需同步操作DOM与Set。
用 Set 处理多选框（<input type="checkbox">）的选中值，核心是：**把所有勾选的 value 收集起来，自动去重，并支持后续增删查操作**。Set 本身不关心 DOM，它只负责维护唯一值集合；你需要配合 DOM 查询和事件监听来联动。
获取当前所有已勾选的唯一值
遍历所有 checkbox 元素，筛选出 checked === true 的，提取 value，传入 new Set()：
const checkboxes = document.querySelectorAll('input[type="checkbox"][name="interests"]');
const selectedValues = new Set(
Array.from(checkboxes)
.filter(cb => cb.checked)
.map(cb => cb.value)
);
这样得到的 selectedValues 就是一个不含重复项的集合，即使 HTML 中有多个相同 value 的 checkbox（虽然不推荐），Set 也会自动 dedupe。
监听变化并实时更新 Set
给每个 checkbox 绑定 change 事件，根据勾选/取消状态动态修改 Set：
立即学习“Java免费学习笔记（深入）”；
- 勾选时调用
set.add(value) - 取消勾选时调用
set.delete(value)
示例：
const selectedSet = new Set();
checkboxes.forEach(cb => {
cb.addEventListener('change', () => {
if (cb.checked) {
selectedSet.add(cb.value);
} else {
selectedSet.delete(cb.value);
}
});
});
注意：不要在事件里重新遍历全部 checkbox 创建新 Set，那样会丢失历史状态或覆盖逻辑（比如你可能还手动 add 了其他值）。
把 Set 转成数组或字符串用于提交
后端通常接收数组或逗号分隔字符串，Set 提供便捷转换方式：
- 转数组：
Array.from(selectedSet)或[...selectedSet] - 转字符串（如用于 URL 参数或隐藏字段）：
Array.from(selectedSet).join(',') - 检查是否包含某值：
selectedSet.has('js')（比数组includes更快）
提交前可直接用：
fetch('/api/save', {
method: 'POST',
body: JSON.stringify({
interests: Array.from(selectedSet) // ✅ 去重后的纯数组
})
});
额外技巧：全选/取消全选同步 Set
如果页面有“全选”复选框，它的 change 事件应批量操作 Set：
const selectAll = document.getElementById('select-all');
selectAll.addEventListener('change', () => {
if (selectAll.checked) {
checkboxes.forEach(cb => {
cb.checked = true;
selectedSet.add(cb.value);
});
} else {
checkboxes.forEach(cb => {
cb.checked = false;
selectedSet.delete(cb.value);
});
}
});
这样能保证 DOM 状态与 Set 数据始终一致，避免“界面上勾了但 Set 没加”的错位问题。
