原生JavaScript构建灵活的多组复选框数据管理方案

<form action="#">
  <!-- 第一个复选框组 -->
  <fieldset>
    <legend>组 1</legend>
    <!-- 每个复选框都包裹在 <label> 中，提升用户体验 -->
    <label>
      <!-- name 属性用于后端提交，data-name 用于前端JS识别组 -->
      <input type="checkbox" value="1" name="group-1[]" data-name="group-1">
      <span class="labelText">1</span>
    </label>
    <label>
      <input type="checkbox" value="2" name="group-1[]" data-name="group-1">
      <span class="labelText">2</span>
    </label>
    <!-- ... 更多复选框 ... -->
    <output class="result" style="--delimiter: -;"></output>
  </fieldset>

  <!-- 第二个复选框组 -->
  <fieldset>
    <legend>组 2</legend>
    <label>
      <input type="checkbox" value="A" name="group-2[]" data-name="group-2">
      <span class="labelText">A</span>
    </label>
    <label>
      <input type="checkbox" value="B" name="group-2[]" data-name="group-2">
      <span class="labelText">B</span>
    </label>
    <!-- ... 更多复选框 ... -->
    <output class="result" style="--delimiter: ,;"></output>
  </fieldset>
  <!-- 可以根据需要添加更多 <fieldset> 组 -->
</form>

// 常用DOM操作的简化函数
const D = document,
  create = (tag, props) => Object.assign(D.createElement(tag), props),
  get = (selector, context = D) => context.querySelector(selector),
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)];

/**
 * 复选框状态变化处理器
 * @param {Event} evt - 触发的事件对象
 */
const checkboxHandler = (evt) => {
  const changed = evt.currentTarget; // 触发事件的复选框
  // 向上查找最近的 <fieldset>，然后在其内部查找 .result 元素
  const output = get('.result', changed.closest('fieldset'));
  // 从 output 元素的 CSS 自定义属性中获取分隔符
  const delimiter = window.getComputedStyle(output, null).getPropertyValue("--delimiter");
  const resultValue = changed.value.trim(); // 获取复选框的值
  // 使用 data-name 和值创建唯一的类名，用于后续删除操作
  const resultClass = `${changed.dataset.name}${delimiter}${resultValue}`;

  // 创建一个 span 元素用于显示选中值
  const resultWrapper = create('span', {
    textContent: resultValue,
    className: resultClass,
  });
  // 创建一个 em 元素用于显示分隔符
  const delimiterWrapper = create('em', {
    textContent: delimiter,
    className: "delimiter"
  });

  if (changed.checked) {
    // 如果复选框被选中，则在 output 中添加分隔符和值
    output.append(delimiterWrapper, resultWrapper);
  } else {
    // 如果复选框被取消选中，则移除对应的值及其前一个分隔符
    const toRemove = get(`.${resultClass}`, output);
    if (toRemove) { // 确保元素存在才移除
      // 同时移除值元素和它前面的分隔符元素
      [toRemove.previousElementSibling, toRemove].forEach((el) => el.remove());
    }
  }
};

// 为所有复选框添加 change 事件监听器
getAll('input[type=checkbox]').forEach(
  (el) => el.addEventListener('change', checkboxHandler)
);

form {
  --labelSize: 3rem; /* 定义标签尺寸变量 */
}

fieldset {
  --accent: palegreen; /* 定义强调色变量 */
  display: inline-grid; /* 启用内联网格布局 */
  gap: 0.5rem; /* 网格间距 */
  grid-auto-rows: var(--labelSize); /* 自动行高 */
  /* 定义列布局：重复3列，每列宽度为 labelSize */
  grid-template-columns: repeat(var(--columnCount, 3), var(--labelSize));
  border: 1px solid #ccc; /* 边框 */
  padding: 1rem; /* 内边距 */
  margin-bottom: 1rem; /* 外边距 */
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

label {
  border: 1px solid currentColor; /* 边框颜色与当前文本色一致 */
  display: grid; /* 内部也采用网格布局 */
  padding: 0.25rem;
  text-align: center;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  cursor: pointer; /* 鼠标样式 */
}

label input {
  accent-color: var(--accent, unset); /* 改变复选框默认颜色 */
  order: 1; /* 将 input 元素排在 label 内部的第二个位置 */
  margin: 0; /* 移除默认外边距 */
}

/* 选中状态的 input 旁边的 span 样式 */
input:checked + span {
  background-image: linear-gradient(90deg, aqua, var(--accent, transparent)); /* 渐变背景 */
  font-weight: bold; /* 字体加粗 */
}

.result {
  border: 1px solid currentColor;
  display: flex; /* 启用弹性盒布局 */
  flex-flow: row wrap; /* 允许换行 */
  gap: 0.25rem; /* 元素间距 */
  grid-column: span 3; /* 跨越3列 */
  padding-block: 0.25rem; /* 垂直内边距 */
  padding-inline: 0.5rem; /* 水平内边距 */
  min-height: var(--labelSize); /* 最小高度 */
  align-items: center; /* 垂直居中 */
}

/* 隐藏第一个分隔符 */
.result .delimiter:first-child {
  display: none;
}

.result span {
  background-color: #f0f0f0;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.result em {
  color: #888;
}