原生JS多选框数据管理方法

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

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

关键点：

• 和

  ：

  提供明确的逻辑分组和标题，增强表单的可访问性。
• 包裹 <input>： 使得点击文本也能选中/取消选中复选框，改善用户体验。
• name="group-N[]"： 后端（如PHP）接收时，group-N 将被识别为一个数组，包含所有选中的值。
• data-name="group-N"： 这是一个自定义数据属性，用于JavaScript在处理事件时识别复选框所属的组，避免了name属性中特殊字符（如[]）在CSS选择器中的转义问题。
• ：
  HTML5的
  标签是显示计算结果的语义化选择。class="result"用于JavaScript定位，style="--delimiter: -;"则定义了一个CSS自定义属性，用于指定选中值之间的分隔符，增强了灵活性。

3. JavaScript逻辑实现

JavaScript部分负责监听复选框的选中状态变化，并实时更新相应组的输出区域。

// 常用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)
);

代码解析：

1. 辅助函数： create, get, getAll 是为了简化DOM操作而定义的工具函数，使代码更简洁易读。
2. checkboxHandler 函数：
   • evt.currentTarget 获取到当前触发事件的复选框元素。
   • changed.closest('fieldset') 向上查找最近的父级
     元素，确保我们是在当前组内操作。
   • get('.result', changed.closest('fieldset')) 在找到的
     内部查找class="result"的

     元素，从而实现各组输出的独立性。
   • window.getComputedStyle(output, null).getPropertyValue("--delimiter") 动态获取CSS自定义属性--delimiter的值，用作选中值之间的连接符。
   • resultClass 的生成结合了data-name和value，创建了一个唯一的类名，方便后续精准地找到并移除对应的显示元素。
   • 当复选框被选中时，动态创建（分隔符）和（值）元素，并使用output.append()添加到
     中。
   • 当复选框被取消选中时，通过之前生成的resultClass找到对应的元素，并同时移除该及其前一个兄弟元素（即分隔符），保持显示内容的整洁。
3. 事件绑定： getAll('input[type=checkbox]').forEach(...) 遍历页面上所有的复选框，并为它们各自绑定change事件，调用checkboxHandler函数。这种方式比全局监听更具针对性。

4. CSS样式设计

CSS用于美化表单和输出区域，并利用CSS Grid布局实现复选框的网格排列，以及通过自定义属性增强样式灵活性。

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

样式解析：

• CSS自定义属性： var(--labelSize) 和 var(--accent) 的使用，使得尺寸和颜色配置更加集中和易于修改。
• fieldset 布局： display: inline-grid 结合 grid-template-columns 和 grid-auto-rows，将复选框以整齐的网格形式排列。
• label 样式： 将input和span都放在label中，并利用order: 1将input视觉上放置在span之后，但DOM顺序不变，方便input:checked + span选择器生效。
• input:checked + span： 当复选框被选中时，其紧邻的元素（显示文本）会获得特定的背景和字体样式，提供直观的视觉反馈。
• .result 布局： display: flex 和 flex-flow: row wrap 使输出的值能够水平排列并自动换行。grid-column: span 3 让输出区域横跨整个fieldset的宽度。
• .result .delimiter:first-child： 巧妙地隐藏了输出区域中的第一个分隔符，避免了开头出现多余的连接符。

5. 注意事项与总结

• 语义化HTML： 充分利用HTML5的
  ,

  ,

  标签，不仅增强了页面的结构性和可读性，也提升了可访问性。
• 原生JavaScript优势： 避免了外部库的引入，减少了页面加载负担，并提供了更精细的控制能力。对于现代浏览器环境，原生JS的性能表现通常优于jQuery。
• 数据持久化： 本教程侧重于前端数据的展示与管理。要将这些数据存储到MariaDB或其他数据库，您需要通过表单提交（例如，
  标签的action和method属性）将name="group-N[]"的复选框值发送到后端服务器。后端脚本（如PHP、Node.js、Python等）会接收这些数据并将其处理后存入数据库。
• *`data-属性的妙用：** 在name属性包含特殊字符（如[]）时，data-*`属性提供了一个干净且易于在JavaScript选择器中使用的标识符。
• 可扩展性： 这种模块化的设计使得添加新的复选框组变得非常简单，只需复制粘贴
  结构，并调整name和data-name属性即可，无需修改JavaScript逻辑。

通过上述方法，我们成功构建了一个灵活、高效且易于维护的多组复选框数据管理方案。这不仅解决了多组复选框数据混淆的问题，还通过语义化HTML和原生JavaScript提升了整体的用户体验和代码质量。

理论要掌握，实操不能落！以上关于《原生JS多选框数据管理方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！