用set过滤复选框重复值的核心是：收集所有被勾选的value并自动去重，再转为数组使用；需先用queryselectorall选中:checked复选框，array.from转真数组，map取value，new set去重，再用展开运算符转为数组。
用 Set 过滤复选框重复值，核心是：收集所有被勾选的 value，自动去重，再转成数组使用。
获取所有选中复选框的值并去重
先用 querySelectorAll 选中所有被勾选的复选框（:checked），遍历取 value，传入 Set 构造函数即可自动去重：
const checkedValues = [...new Set(
Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(checkbox => checkbox.value)
)];
说明：
– document.querySelectorAll(...) 返回的是伪数组（NodeList），需用 Array.from() 转成真数组；
– map 提取每个复选框的 value；
– new Set(...) 自动剔除重复值；
– [...] 展开为普通数组，方便后续操作（如 join、forEach）。
监听变化时实时更新去重结果
如果复选框会动态勾选/取消，建议绑定 change 事件，每次触发都重新计算：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(box => {
box.addEventListener('change', () => {
const uniqueValues = [...new Set(
Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(cb => cb.value)
)];
console.log('当前唯一选中值：', uniqueValues);
});
});
注意：
– 不要用 click，它在复选框状态真正改变前就触发；
– change 更准确，确保拿到的是最终选中状态；
– 若复选框是异步插入的（如通过 JS 添加），记得用事件委托或后续重新绑定。
处理空值或默认值干扰
有些复选框可能没设 value（默认为 "on"），或显式设为空字符串 value=""，导致多个“空”也被视为相同值。若需排除空值，加一层过滤：
const uniqueNonEmptyValues = [...new Set(
Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(cb => cb.value)
.filter(val => val.trim() !== '')
)];
常见情况：
– 没写 value 的复选框，checkbox.value 是 "on"；
– value="" 或纯空格，用 trim() 后判断更稳妥；
– 如需保留 "on" 但排除空字符串，可改用 filter(val => val !== '')。
配合表单提交或后端传参
得到去重数组后，常用于拼接参数、校验或发送请求。例如生成 URL 查询字符串：
const params = new URLSearchParams();
uniqueValues.forEach(val => params.append('tag', val));
fetch(`/api/items?${params}`);
或作为 JSON 发送：
fetch('/api/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ selectedTags: uniqueValues })
});
关键点：
– 不要直接把 Set 对象传给 JSON.stringify（它不会序列化）；
– 务必先转成数组（[...set] 或 Array.from(set)）；
– 如果后端要求字符串（如逗号分隔），可用 uniqueValues.join(',')。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
