本文讲解如何通过为不同逻辑分组（如“主食”和“主菜”）的单选按钮分配唯一 name 属性，解决同一页面中多个 radio 组只能选中一项的常见问题，并提供可运行的 HTML + jQuery 实现方案。
本文讲解如何通过为不同逻辑分组（如“主食”和“主菜”）的单选按钮分配唯一 `name` 属性，解决同一页面中多个 radio 组只能选中一项的常见问题，并提供可运行的 html + jquery 实现方案。
在 Web 表单开发中，<input type="radio"> 的核心行为是：同名（name 相同）的 radio 按钮构成一个互斥组，用户只能从中选择一项。这正是你当前代码中只能选中一个选项的根本原因——所有 radio 共享 name="buffetSelection"，浏览器将其视为单一选择组。
要实现“主食”与“主菜”两个独立选择（例如同时选中 Jeera Rice 和 Vegetable Kurma），必须将它们划分为语义清晰、名称独立的两组。推荐做法如下：
✅ 为每组 radio 设置专属 name 值：
- 主食区域 →
name="mainCourseSelection" - 主菜区域 →
name="mainGravySelection"
同时，需同步更新 JavaScript 逻辑，分别获取两组的选中值，并按预期格式组装结果。
以下是优化后的完整代码示例（含结构修复与增强逻辑）：
<div class="row">
<!-- 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" checked><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" checked><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>
</div>
<button type="button" class="btn btn-theme text-white fw-bold w-100" onclick="get_buffetDetails()">PROCEED</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
function get_buffetDetails() {
// 分别获取两个分组的选中值
const mainCourseVal = $('input[name="mainCourseSelection"]:checked').val();
const mainGravyVal = $('input[name="mainGravySelection"]:checked').val();
// 获取对应分组的隐藏类别文本
const mainCourseLabel = $('.col-sm-6:first .buffetCategory').val();
const mainGravyLabel = $('.col-sm-6:last .buffetCategory').val();
// 构建符合预期的二维数组输出
const result = [];
if (mainCourseVal) result.push([mainCourseLabel, parseInt(mainCourseVal)]);
if (mainGravyVal) result.push([mainGravyLabel, parseInt(mainGravyVal)]);
console.log(result); // 输出: [["Main Course", 2], ["Main Gravy", 7]]
return result;
}
</script>
? 关键注意事项：
- ✅
name是 radio 分组的唯一标识符，绝不可重复用于不同逻辑组； - ✅ 使用
:checked伪类配合精确name选择器，避免误读其他组状态； - ✅ 若某组未做任何选择，
.val()返回undefined，建议增加空值判断（如示例中if (mainCourseVal)）； - ✅ 隐藏字段
.buffetCategory的定位应结合 DOM 结构（如使用:first/:last或添加唯一 class），确保语义关联准确； - ⚠️ 不要依赖
class（如.buffetSelection）跨组筛选 radio——它不具备分组能力，仅用于样式或通用事件绑定。
通过合理划分 name 属性并配套调整 JS 逻辑，即可轻松实现多维度、多分组的单选交互，兼顾语义清晰性与功能健壮性。
