单选按钮实现互斥的关键是name属性值必须一致；value需严格匹配后端约定字段，不可为空或误用id/name；checked应通过数据绑定控制，避免dom操作；推荐label包裹input以确保点击可用。
单选按钮 name 属性必须一致才能互斥
后端返回的选项列表（比如 options 数组）只是数据，HTML 单选按钮能否真正“单选”，完全取决于是否共享同一个 name 属性值。常见错误是给每个 <input type="radio"> 生成了不同 name（如拼接了 index 或 id），结果点哪个都可选，毫无互斥性。
实操建议：
- 所有动态生成的单选按钮统一用固定
name，例如name="status"或根据字段名动态生成但保持组内一致，如name="user_role" - 不要用
id、index、value等变量拼接name，否则逻辑就崩了 - 如果页面有多个单选组（如“性别”和“状态”），每组用各自语义化
name，彼此隔离
value 值必须与后端约定一致，且不可为空字符串
用户选择后，前端通常要提交 value 给后端。若渲染时 value 写成空字符串、undefined 或临时 ID（如 item.id 但后端实际认 item.code），会导致提交失败或数据错乱。
实操建议：
- 确认接口字段：明确后端期望接收哪个字段作为提交值，常见是
item.value、item.code或item.key，而不是item.label或item.id - 避免默认 fallback：不要写
value={item.value || item.id}，万一item.value是0或false就被误替换成id - 空值显式处理：如果某选项确实没有合法
value，宁可不渲染该项，也不要塞""或"null"
初始选中态靠 checked 属性控制，别依赖 DOM 操作
接口返回的当前值（如 currentValue: "active"）需要在渲染时让对应单选按钮自动勾选。错误做法是等 DOM 挂载后再用 document.querySelector 找节点并设 checked=true —— 这在 React/Vue 等框架里会破坏响应式，也可能因异步时机出问题。
实操建议：
- 在循环渲染时，每个
<input>的checked属性直接绑定表达式，例如：checked={item.value === currentValue} - 确保
currentValue有默认值（如null或undefined），避免未定义比较导致全部未选中 - 如果使用原生 JS 拼 HTML 字符串，也要在生成时就写死
checked属性（注意布尔属性写法：checked或checked=""，不要写checked="true"）
label for 与 input id 配对失效？用包裹写法更可靠
为了点击文字也能选中，常给 <label></label> 加 for 属性指向 <input> 的 id。但动态渲染时容易漏掉 id，或重复、冲突，导致点击无响应。
实操建议：
- 优先用 label 包裹 input 的写法：
<label><input type="radio" name="xxx" value="a"> 选项A</label>，完全规避id/for配对问题 - 如果必须分离（如样式限制），则为每个 input 生成唯一
id，例如id={`radio-${item.value}`}，同时 label 的for严格对应 - 避免用随机数或时间戳生成
id（影响 SSR 或服务端渲染一致性），用稳定字段组合，如item.value+ 组名
id 或 name，而实际该取后端文档里明确标注的 “submit value” 字段。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
