如何为不同分组的单选按钮设置独立名称以实现多组选择-html教程-PHP中文网

如何为不同分组的单选按钮设置独立名称以实现多组选择

本文讲解如何通过为不同容器内的单选按钮（radio）分配唯一 name 属性，实现在多个逻辑分组（如“主食”和“主菜”）中各自独立选中一项，并使用 JavaScript 正确获取每组所选值，最终返回结构化结果。

本文讲解如何通过为不同容器内的单选按钮（radio）分配唯一 `name` 属性，实现在多个逻辑分组（如“主食”和“主菜”）中各自独立选中一项，并使用 javascript 正确获取每组所选值，最终返回结构化结果。

在 Web 表单开发中，<input type="radio"> 的核心行为是：同一 name 值下的所有单选按钮构成一个互斥组，用户只能从中选择一项。这正是原代码中无法同时选中 “Jeera Rice”（主食）和 “Vegetable Kurma”（主菜）的根本原因——所有 radio 共享 name="buffetSelection"，导致浏览器强制单选。

要实现跨分组的独立选择（即每组各选 1 项），必须为每个逻辑分组分配语义清晰、彼此不同的 name 值。以下是关键改造步骤与完整实现：

✅ 步骤一：分离 radio 分组的 `name` 属性

主食区域（Main Course）→ 使用 name="mainCourseSelection"
主菜区域（Main Gravy）→ 使用 name="mainGravySelection"

<!-- Main Course Section -->
<div class="col-sm-6" style="background-color:lightcyan;">
  <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Course</h4>
  <input type="hidden" class="form-control buffetCategory" value="Main Course"><div class="col-md-12 px-0 border-top">
    <div class="d-flex gap-2 p-3 border-bottom gold-members">
      <input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="1"><div><h5 class="mb-1">Biryani Rice</h5></div>
    </div>
  </div>
  <div class="col-md-12 px-0 border-top">
    <div class="d-flex gap-2 p-3 border-bottom gold-members">
      <input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="2"><div><h5 class="mb-1">Jeera Rice</h5></div>
    </div>
  </div>
</div>

<!-- Main Gravy Section -->
<div class="col-sm-6" style="background-color:lightcyan;">
  <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Gravy</h4>
  <input type="hidden" class="form-control buffetCategory" value="Main Gravy"><div class="col-md-12 px-0 border-top">
    <div class="d-flex gap-2 p-3 border-bottom gold-members">
      <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="6"><div><h5 class="mb-1">Vegetable Dalcha</h5></div>
    </div>
  </div>
  <div class="col-md-12 px-0 border-top">
    <div class="d-flex gap-2 p-3 border-bottom gold-members">
      <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="7"><div><h5 class="mb-1">Vegetable Kurma</h5></div>
    </div>
  </div>
  <div class="col-md-12 px-0 border-top">
    <div class="d-flex gap-2 p-3 border-bottom gold-members">
      <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="8"><div><h5 class="mb-1">Vegetable Dalcha</h5></div>
    </div>
  </div>
</div>

✅ 步骤二：更新 JavaScript 获取逻辑

使用 jQuery 分别查询各组已选值，并结合对应区域的隐藏字段（.buffetCategory）提取分类名称，组装为二维数组：

function get_buffetDetails() {
  const result = [];

  // 获取 Main Course 选择
  const mainCourseVal = $('input[name="mainCourseSelection"]:checked').val();
  const mainCourseCat = $('.col-sm-6:first .buffetCategory').val();
  if (mainCourseVal) {
    result.push([mainCourseCat, parseInt(mainCourseVal)]);
  }

  // 获取 Main Gravy 选择
  const mainGravyVal = $('input[name="mainGravySelection"]:checked').val();
  const mainGravyCat = $('.col-sm-6:last .buffetCategory').val();
  if (mainGravyVal) {
    result.push([mainGravyCat, parseInt(mainGravyVal)]);
  }

  console.log(result); // 示例输出: [["Main Course", 2], ["Main Gravy", 7]]
  return result;
}

? 提示：parseInt() 确保数值类型统一；条件判断避免未选时推入 undefined。

⚠️ 注意事项

不要复用 name：即使视觉上分隔，只要 name 相同，就属于同一组，强制单选。
隐藏字段定位需准确：本例中利用 .col-sm-6:first 和 .col-sm-6:last 匹配左右两栏；更健壮的做法是为每个分组添加唯一 data-category 属性并绑定查找。
无障碍兼容性：建议为每个 radio 添加 <label></label> 或 aria-labelledby，提升可访问性。
表单提交准备：若需后端接收，可动态生成隐藏输入域（如 <input type="hidden" name="main_course_id" value="2">）同步提交。