JavaScript 中 Set 怎么在多选框 Checkbox 组件中维护已选值的集合-js教程-PHP中文网

用set管理多选框的核心是将checkbox的value作为唯一标识存入set并同步更新。初始化时根据set设置checked状态；监听change事件增删set；全选/取消全选批量操作set和ui；提交时用array.from(selectedset)获取选中值，set具备去重和o(1)查找优势。

javascript 中 set 怎么在多选框 checkbox 组件中维护已选值的集合

用 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：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

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 状态：

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 唯一且稳定，整个集合管理就清晰可控。