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

以下是一个示例HTML结构，展示了如何组织多个复选框组：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

下载

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

HTML结构关键点：

• :
  语义化地包裹一组相关的复选框和其对应的
  元素。
• :
  为
  提供一个标题，提升表单的可读性。
• : 将 input 和其描述文本关联起来，点击文本也能触发复选框选中/取消，提升用户体验和可访问性。
• name="group-N[]": 使用数组命名约定（例如 entsperrcode[]），方便后端接收多个选中值。
• data-name="group-N": 自定义数据属性，用于JavaScript中识别复选框所属的组。这比在选择器中处理 name 属性中的特殊字符（如 []）更简洁和健壮。
• : 每个组都有一个独立的
  元素来显示结果。--delimiter 是一个CSS自定义属性，用于定义选中值之间的分隔符，增强了灵活性。

2. JavaScript 事件处理与DOM操作

为了实现精确的事件处理和DOM更新，我们将采用原生JavaScript来管理复选框的 change 事件。

2.1 辅助函数

首先，定义一些辅助函数来简化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)];

2.2 checkboxHandler 函数：核心逻辑

这是核心的事件处理函数，负责根据复选框的选中状态动态更新对应的

元素。

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());
  }
};

checkboxHandler 函数详解：

• 上下文感知选择： changed.closest('fieldset') 是实现多组独立处理的关键。它从触发事件的复选框向上查找最近的
  父元素。然后，get('.result', ...) 在这个特定的

  内部查找 .result 类名的元素，从而确保每个复选框只更新其所属组的输出。
• 动态获取分隔符： window.getComputedStyle(output, null).getPropertyValue("--delimiter") 允许我们从CSS中定义的自定义属性动态获取分隔符，增加了配置的灵活性。
• data-name 的应用： changed.dataset.name 访问