17370845950

CSS 样式与自定义属性

为了美化表单并提供更好的用户体验，我们可以利用CSS Grid布局和自定义属性。Grid布局可以轻松地将复选框排列成网格形式，而自定义属性则允许我们定义可重用的值，如尺寸、颜色或分隔符。

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

JavaScript 核心逻辑

为了实现高效且可维护的JavaScript逻辑，我们将使用原生JavaScript，避免对外部库（如jQuery）的依赖，从而减少页面加载时间和提高性能。

首先，定义一些辅助函数来简化DOM操作：

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)];

接下来是核心的事件处理函数checkboxHandler，它将在每个复选框的change事件触发时执行：

const checkboxHandler = (evt) => {
  let changed = evt.currentTarget, // 触发事件的复选框
    // 找到最近的 
 祖先元素，然后在其内部查找 .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());
  }
};

最后，我们将这个事件处理函数绑定到所有复选框的change事件上：

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

注意事项与最佳实践

1. 原生JS与性能： 优先使用原生JavaScript而非大型库（如jQuery），可以减少页面加载负担，提高执行效率，尤其是在移动设备上。
2. DOM 遍历： 使用Element.closest()和Element.querySelector()等方法进行DOM遍历，可以高效且精确地定位到目标元素，避免全局搜索带来的性能开销。
3. 语义化 HTML： 采用
   、

   、和

   等语义化标签，不仅有助于提高代码可读性和可维护性，还能增强页面的可访问性，对使用辅助技术的用户更加友好。
4. CSS 自定义属性： 利用CSS自定义属性（--var）可以方便地管理和修改样式，提高样式的灵活性和可维护性。
5. *`data-属性：** 使用data-*属性存储与元素相关的自定义数据，是连接HTML和JavaScript逻辑的有效方式，它比直接在JavaScript中解析id或name`属性更加灵活和健壮。
6. 数据持久化： 本教程主要关注前端显示逻辑。如果需要将数据提交到后端（如MariaDB），表单提交时，name="group-1[]"这样的命名方式将确保后端能接收到一个包含所有选中值的数组。后端脚本（如PHP、Node.js）需要解析这些数组数据并将其存储到数据库中。
7. 可访问性： 确保元素正确地与关联（通过包裹或使用for属性），这样用户点击标签文本也能选中/取消选中复选框，提升用户体验。

总结

通过本教程介绍的方法，我们成功地实现了一个在动态表单中处理多组复选框独立数据输出的健壮解决方案。该方案利用了原生JavaScript的强大功能、语义化的HTML结构和灵活的CSS样式，确保了代码的高效性、可扩展性和可维护性。通过合理组织HTML、利用CSS自定义属性以及编写清晰的JavaScript逻辑，开发者可以轻松地管理复杂的表单交互，并为用户提供流畅的体验。