本文讲解如何通过为不同逻辑分组（如“主食”和“主菜”）的单选按钮设置唯一 name 值，解决同一页面中多个 div 内单选按钮互相排斥、无法同时选中的问题，并提供可运行的 jquery 示例与结构化处理逻辑。
本文讲解如何通过为不同逻辑分组（如“主食”和“主菜”）的单选按钮设置唯一 name 值，解决同一页面中多个 div 内单选按钮互相排斥、无法同时选中的问题，并提供可运行的 jquery 示例与结构化处理逻辑。
在 Web 表单开发中，<input type="radio"> 的核心行为是：同名（name 相同）的单选按钮构成一个互斥组，用户只能从中选择一项。这正是原代码中无法同时选中 “Jeera Rice” 和 “Vegetable Kurma” 的根本原因——所有 radio 共享 name="buffetSelection"，浏览器强制其单选。
要实现「每个分类独立选择一项」（即 Main Course 选一个 + Main Gravy 选一个），必须为每个逻辑分组分配语义化且唯一的 name 值。例如：
- 主食区使用
name="mainCourseSelection" - 主菜区使用
name="mainGravySelection"
这样两组单选按钮完全解耦，互不影响。
以下是修正后的关键 HTML 片段（精简展示结构）：
<!-- Main Course Section -->
<div class="col-sm-6">
<h4 class="p-3 m-0 bg-light" style="color:red">Main Course</h4>
<input type="hidden" class="buffetCategory" value="Main Course"><div class="d-flex gap-2 p-3 border-bottom">
<input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="1"><div><h5 class="mb-1">Biryani Rice</h5></div>
</div>
<div class="d-flex gap-2 p-3 border-bottom">
<input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="2"><div><h5 class="mb-1">Jeera Rice</h5></div>
</div>
</div>
<!-- Main Gravy Section -->
<div class="col-sm-6">
<h4 class="p-3 m-0 bg-light" style="color:red">Main Gravy</h4>
<input type="hidden" class="buffetCategory" value="Main Gravy"><div class="d-flex gap-2 p-3 border-bottom">
<input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="6"><div><h5 class="mb-1">Vegetable Dalcha</h5></div>
</div>
<div class="d-flex gap-2 p-3 border-bottom">
<input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="7"><div><h5 class="mb-1">Vegetable Kurma</h5></div>
</div>
</div>
对应 JavaScript 处理逻辑需同步更新，不再依赖单一 name 查询，而是分别获取两组选中值，并组合为二维数组格式 [["Main Course", 2], ["Main Gravy", 7]]：
function get_buffetDetails() {
const result = [];
// 获取 Main Course 选中项
const courseRadio = $('input[name="mainCourseSelection"]:checked');
if (courseRadio.length) {
const category = courseRadio.closest('.col-sm-6').find('.buffetCategory').val();
const value = courseRadio.val();
result.push([category, parseInt(value)]);
}
// 获取 Main Gravy 选中项
const gravyRadio = $('input[name="mainGravySelection"]:checked');
if (gravyRadio.length) {
const category = gravyRadio.closest('.col-sm-6').find('.buffetCategory').val();
const value = gravyRadio.val();
result.push([category, parseInt(value)]);
}
console.log(result); // ✅ 输出: [["Main Course", 2], ["Main Gravy", 7]]
return result;
}
✅ 关键注意事项：
-
name属性是单选按钮分组的唯一依据，绝不复用；建议采用groupTypeAction命名风格（如mainCourseSelection），兼顾可读性与唯一性。 - 隐藏域
.buffetCategory用于标识分组名称，应确保其位于对应分组容器内（如.col-sm-6），以便通过closest()准确定位。 - 若某组未选中，应做空值判断（如
if (radio.length)），避免undefined导致逻辑异常。 - 后端接收时，需按两个独立字段（如
main_course_id和main_gravy_id）解析，而非单个buffetSelection。
通过合理划分 name 作用域，即可优雅支持多维度单选组合场景，既符合 HTML 规范，又提升表单扩展性与维护性。
