是唯一合法单选方式，name必须同组完全一致（大小写敏感），label推荐嵌套写法，checked应直接写在html中，value用语义化字符串，表格行级与全表单选name策略须严格区分。
input type="radio" 是唯一合法方式，别用 div 或 span 模拟——那样既不能提交数据，也不被屏幕阅读器识别。
name 属性必须同组一致，否则单选失效
浏览器只靠 name 判断是否属于同一组。如果两个性别选项的 name 分别是 "sex" 和 "gender"，它们就互不干扰，用户能同时选中“男”和“女”。
- 同一逻辑组（如“性别”“婚否”“等级”）的所有
input type="radio"必须共用完全相同的name字符串，大小写敏感 - 不同逻辑组必须用不同
name，比如name="status"和name="level"不能混用 - 服务端模板渲染时容易把变量错拼进
name，例如写成name="row_{{id}}"导致每项 name 实际不同，务必检查最终 HTML 源码
label 一定要配，别只靠 for/id
光写 <input id="opt1"><label for="opt1">选项一</label> 不够稳妥。点击文字没反应？大概率是 id 和 for 值不匹配，或存在重复 id。
- 更推荐嵌套写法：
<label><input type="radio" name="theme" value="dark"> 暗色模式</label>，语义强、无需维护id、点击区域更大 - 若必须显式关联，确保每个
input的id全局唯一，且对应label的for值一字不差 - 禁用
pointer-events: none或opacity: 0直接盖在input上——会切断可访问性链路
默认选中用 checked，别靠 JS 补
页面加载后 JS 才执行，而表单可能已提交或被 SSR 渲染完成。用 JS 设置 checked = true 有竞态风险，且对无 JS 环境（如部分邮件客户端内嵌表单）完全失效。
- 直接在 HTML 中加
checked属性：<input type="radio" name="lang" value="zh" checked> - 同一组中仅允许一个
checked，多写会导致行为未定义（浏览器可能忽略后续项，也可能出错） - value 值建议用语义化字符串（如
"admin"、"guest"），避免用数字索引（如"0"、"1"），方便服务端解析
最易被忽略的是：表格中行级单选和全表单选的 name 策略完全不同。前者每行用独立 name（如 name="row_1001"），后者所有行共用一个 name（如 name="selected_row"）。混用会导致交互逻辑彻底错乱，且很难通过肉眼发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
