单选按钮组互斥的唯一依据是name属性值相同；value绑定选项标识，checked通过比对状态控制；label需用for与input的id配对；提交前须校验是否选中。
单选按钮组的 name 属性必须相同
HTML 单选按钮（<input type="radio">）能构成“组”的唯一依据是 name 属性值一致。如果循环渲染时每个 input 的 name 动态拼错、带了索引、或用了不同变量，就无法互斥——用户能同时选中多个，逻辑彻底失效。
常见错误写法：<input name="option_{{i}}"> 或 <input name="{{item.id}}">，这等于建了 N 个独立单选组。
- 正确做法：所有选项共用一个静态
name，比如name="payment_method" - 后端接收时也只认这个固定 name，例如 PHP 的
$_POST['payment_method']，JS 的document.querySelector('input[name="payment_method"]:checked') - 若需区分多组单选（如“支付方式”和“发票类型”），每组用各自独立的静态 name，不要复用
循环中 value 和 checked 要绑定数据源
每个 <input> 的 value 应取自当前循环项的标识字段（如 ID 或 code），而 checked 属性是否添加，取决于该选项是否为“当前选中值”——这需要对比后端传来的默认值或 JS 状态变量。
示例（Vue 模板语法）：
<div v-for="item in options" :key="item.id">
<input type="radio" :name="'payment_method'" :value="item.value" :id="'pay_' + item.id" :checked="item.value === selectedValue"><label :for="'pay_' + item.id">{{ item.label }}</label>
</div>
-
:value="item.value"决定提交时发送什么值，不是显示文本 -
:checked="item.value === selectedValue"是布尔表达式，不是字符串"checked"；Vue/React 会自动处理属性存在与否 - 原生 JS 循环拼 HTML 时，要手动写
checked="checked"（仅当匹配时），别漏掉引号
label for 和 id 配对才能点文字选中
只循环 <input> 不够，用户点击文字没反应。必须给每个 input 加唯一 id，再让对应 <label for="xxx"></label> 指向它。否则只能点小圆圈，体验极差。
- id 不能重复，也不能是静态值（如都写
id="radio1"）；推荐组合循环项唯一字段，如:id="'opt_' + item.id" - label 的
for值必须和 input 的id完全一致，大小写、下划线都不能错 - 不配对时，Chrome 控制台不会报错，但点击无效——这是最常被忽略的“功能正常但体验崩坏”点
提交前务必验证是否有选中项
单选按钮组允许“全未选中”，浏览器不会阻止表单提交，后端拿到的是空值或 undefined。这不是 bug，是 HTML 规范行为。
- 前端校验：提交前检查
document.querySelector('input[name="payment_method"]:checked')是否为null - 后端校验：绝不能信任前端传来的值，必须判断
$_POST['payment_method']是否存在且在合法枚举内 - 若业务要求必选，建议加
required属性（但注意：首个 radio 加required即可，多个加会触发多次验证提示）
动态渲染本身不改变这一规则，但容易让人误以为“循环生成了就一定有默认值”，其实没有显式设置 checked，初始就是全未选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
