使用原生JavaScript实现多组复选框与独立文本输出的动态绑定

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

console.clear(); // 清除控制台，便于调试

// 辅助函数，简化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)];

// 复选框事件处理函数
const checkboxHandler = (evt) => {
  let changed = evt.currentTarget, // 触发事件的复选框
    // 找到当前复选框最近的 <fieldset>，然后在其中查找 .result 元素
    output = get('.result', changed.closest('fieldset')),
    // 获取 CSS 自定义属性 --delimiter 的值作为分隔符
    delimiter = window.getComputedStyle(output, null).getPropertyValue("--delimiter"),
    result = changed.value.trim(), // 获取复选框的值并去除空白
    // 构建一个唯一的类名，用于后续查找和移除对应的显示元素
    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());
  }
};

// 为所有复选框添加 '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); /* 自动行高 */
  grid-template-columns: repeat(var(--columnCount, 3), var(--labelSize)); /* 列布局 */
  margin: 1rem; /* 间距 */
  padding: 1rem; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
}

label {
  border: 1px solid currentColor;
  display: grid;
  padding: 0.25rem;
  text-align: center;
}

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

input:checked + span {
  background-image: linear-gradient( 90deg, aqua, var(--accent, transparent)); /* 选中时的背景渐变 */
}

.result {
  border: 1px solid currentColor;
  display: flex; /* 使用 Flexbox 布局 */
  flex-flow: row wrap; /* 允许换行 */
  gap: 0.25rem; /* 元素间距 */
  grid-column: span 3; /* 在网格布局中跨越3列 */
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

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