动态表单中多组复选框独立数据输出实现指南

<form action="#">
  <fieldset>
    <legend>Group 1</legend>
    <label>
      <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>
    <!-- 更多复选框... -->
    <label>
      <input type="checkbox" value="9" name="group-1[]" data-name="group-1">
      <span class="labelText">9</span>
    </label>
    <!-- 使用 <output> 元素显示结果 -->
    <output class="result" style="--delimiter: -;"></output>
  </fieldset>

  <fieldset>
    <legend>Group 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>
    <!-- 更多复选框... -->
    <label>
      <input type="checkbox" value="Z" name="group-2[]" data-name="group-2">
      <span class="labelText">Z</span>
    </label>
    <output class="result" style="--delimiter: ,;"></output>
  </fieldset>
</form>

form {
  --labelSize: 3rem; /* 定义标签尺寸的自定义属性 */
}

fieldset {
  --accent: palegreen; /* 定义强调色的自定义属性 */
  display: inline-grid; /* 使用 inline-grid 布局 */
  gap: 0.5rem; /* 网格间距 */
  grid-auto-rows: var(--labelSize); /* 行高 */
  grid-template-columns: repeat(var(--columnCount, 3), var(--labelSize)); /* 列宽，默认3列 */
  margin-bottom: 1rem; /* 增加 fieldset 之间的间距 */
  border: 1px solid #ccc; /* 添加边框 */
  padding: 1rem; /* 内部填充 */
}

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

label {
  border: 1px solid currentColor;
  display: grid;
  padding: 0.25rem;
  text-align: center;
  cursor: pointer; /* 提示用户标签是可点击的 */
}

label input {
  accent-color: var(--accent, unset); /* 设置复选框的强调色 */
  order: 1; /* 改变输入框的显示顺序，使其在标签文本之后 */
}

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); /* 确保 output 元素有最小高度 */
  align-items: center; /* 垂直居中内容 */
}

/* 隐藏第一个分隔符，避免开头出现多余的分隔符 */
.result .delimiter:first-child {
  display: none;
}

console.clear(); // 清除控制台，便于调试
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)];

const checkboxHandler = (evt) => {
  let changed = evt.currentTarget, // 触发事件的复选框
    // 找到最近的 <fieldset> 祖先元素，然后在其内部查找 .result 元素
    output = get('.result', changed.closest('fieldset')),
    // 从 output 元素的计算样式中获取 --delimiter 自定义属性值
    delimiter = window.getComputedStyle(output, null).getPropertyValue("--delimiter"),
    result = changed.value.trim(), // 获取复选框的值
    // 使用 data-name 和值构建一个唯一的类名，用于后续删除
    resultClass = `${changed.dataset.name}${delimiter}${result}`,
    // 创建一个 span 元素来显示选中的值
    resultWrapper = create('span', {
      textContent: result,
      className: resultClass,
    }),
    // 创建一个 em 元素来显示分隔符
    delimiterWrapper = create('em', {
      textContent: delimiter,
      className: "delimiter"
    });

  if (changed.checked) {
    // 如果复选框被选中，则将分隔符和值追加到 output 元素中
    output.append(delimiterWrapper, resultWrapper);
  } else {
    // 如果复选框被取消选中，找到对应的元素并移除
    let toRemove = get(`.${resultClass}`, output);
    // 同时移除该值元素及其前面的分隔符元素
    [toRemove.previousElementSibling, toRemove].forEach((el) => el.remove());
  }
};

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