高效管理多组复选框：动态数据绑定与显示教程

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

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)); /* 默认3列 */
  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;
  cursor: pointer;
}

label input {
  accent-color: var(--accent, unset); /* 改变复选框颜色 */
  order: 1; /* 使复选框在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; /* 跨越所有列 */
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  min-height: var(--labelSize); /* 最小高度 */
  align-items: center;
}

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

.result .delimiter {
  color: #888;
}

.result span {
  padding: 0.1rem 0.3rem;
  background-color: #e0e0e0;
  border-radius: 3px;
}

console.clear(); // 清除控制台
const D = document, // 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，并在其中查找结果输出区域
    output = get('.result', changed.closest('fieldset')),
    // 获取CSS自定义属性中定义的分隔符
    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.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)
);

<?php
if (isset($_POST['group-1'])) {
    $selected_values = $_POST['group-1']; // 这是一个包含选中值的数组
    $conn = new mysqli("localhost", "user", "password", "database");
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    foreach ($selected_values as $value) {
        $stmt = $conn->prepare("INSERT INTO your_table (group_name, selected_value) VALUES (?, ?)");
        $group_name = "group-1"; // 或者从其他地方获取组名
        $stmt->bind_param("ss", $group_name, $value);
        $stmt->execute();
    }
    $stmt->close();
    $conn->close();
}
?>