实现多组复选框与独立文本输出的专业教程

<form action="#">
  <!-- 第一个复选框组 -->
  <fieldset>
    <legend>解锁码</legend>
    <label>
      <input type="checkbox" value="1" name="entsperrcode[]" data-name="entsperrcode">
      <span class="labelText">1</span>
    </label>
    <label>
      <input type="checkbox" value="2" name="entsperrcode[]" data-name="entsperrcode">
      <span class="labelText">2</span>
    </label>
    <label>
      <input type="checkbox" value="3" name="entsperrcode[]" data-name="entsperrcode">
      <span class="labelText">3</span>
    </label>
    <label>
      <input type="checkbox" value="4" name="entsperrcode[]" data-name="entsperrcode">
      <span class="labelText">4</span>
    </label>
    <output class="result" style="--delimiter: -;"></output>
  </fieldset>

  <!-- 第二个复选框组 -->
  <fieldset>
    <legend>损坏类型</legend>
    <label>
      <input type="checkbox" value="Display" name="beschaedig[]" data-name="beschaedig">
      <span class="labelText">屏幕</span>
    </label>
    <label>
      <input type="checkbox" value="Rückseite" name="beschaedig[]" data-name="beschaedig">
      <span class="labelText">背面</span>
    </label>
    <label>
      <input type="checkbox" value="Rand" name="beschaedig[]" data-name="beschaedig">
      <span class="labelText">边框</span>
    </label>
    <output class="result" style="--delimiter: ,;"></output>
  </fieldset>
</form>

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>，然后在其内部查找 class 为 .result 的 <output> 元素
    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 {
    // 如果复选框被取消选中，则通过之前生成的 resultClass 找到对应的元素
    let toRemove = get(`.${resultClass}`, output);
    // 移除值元素及其前面的分隔符元素
    // 使用 Array.forEach 确保同时移除两个元素
    [toRemove.previousElementSibling, toRemove].forEach((el) => el.remove());
  }
};