单选功能依赖同名name属性实现，浏览器原生限制同name组仅一个可选；value必须唯一且设置，label提升可访问性；name冲突会导致组间干扰，推荐语义化命名如notification_method；checked仅设一个确保初始状态。
用 <input type="radio"> 实现单选，name 属性是关键
单选功能不是靠某个属性“开启”的，而是靠一组 <input type="radio"> 共享相同的 name 值来实现的。浏览器只允许同一 name 下的一个 radio 被选中，这是原生行为，无需 JS 干预。
常见错误是漏写 name，或大小写/空格不一致（比如 name="gender" 和 name="Gender" 被视为两个组）；也有人误用 id 代替 name，但 id 只用于关联 <label></label>，不影响单选逻辑。
-
value必须设 —— 提交时后端收到的就是这个值，不是显示文字 - 每个 radio 的
value应该互不相同，否则无法区分用户选了哪个 - 用
<label></label>包裹 radio 或用for关联，能提升点击区域和可访问性
多个 radio 组共存时，name 值必须严格区分
一个页面可以有若干组单选按钮，比如“性别”“是否学生”“偏好通知方式”。它们之间互不影响，前提是每组的 name 值完全不同。
容易踩的坑是复制粘贴时忘记改 name，导致本该独立的两组被合并成一组，用户在 A 组选了之后，B 组的选项自动取消 —— 这其实是 name 冲突的典型表现。
- 推荐命名带语义，如
name="notification_method"、name="student_status" - 避免用数字或无意义缩写，比如
name="r1"、name="opt"，后期维护难定位 - 如果用 JS 动态生成，确保每次生成的
name值按组隔离，别用全局变量覆盖
默认选中用 checked，但注意不要多个同时设
checked 是布尔属性，存在即生效。同一 name 组里若多个 radio 都写了 checked，浏览器只会保留最后一个（HTML 解析顺序），但这属于未定义行为，不可依赖。
更稳妥的做法是：只给一个 radio 加 checked，或者完全不加，由用户首次操作决定初始状态。
- 服务端渲染时，可基于当前数据动态插入
checked，比如 PHP 中<input type="radio" name="theme" value="dark" echo :>> - 纯前端场景下，也可用 JS 设置：
document.querySelector('input[value="dark"]').checked = true，但优先走 HTML 原生属性更可靠 - 注意：设置
checked不会触发change事件，只有用户手动点击才会触发
表单提交后，后端只收到一个 name=value 键值对
这是单选最核心的语义保证：无论页面上有多少个同名 radio，HTTP 请求体（无论是 GET 查询参数还是 POST 表单数据）里，该 name 只出现一次，对应用户选中的那个 value。
如果你在后端收到空值，大概率是：所有 radio 都没设 checked，且用户又没做任何选择直接提交 —— 此时该字段根本不会出现在请求中（不是 value=""，而是压根不存在）。
- PHP 中用
$_POST['gender'] ?? null安全读取，避免未定义索引警告 - Node.js + Express 中检查
req.body.gender !== undefined，而不是== null - 若业务上必须有默认值，应在后端补全逻辑，而不是强行让某个 radio 默认选中（除非 UX 明确要求）
radio 的语义和行为已经足够健壮，只要 name 对齐、value 清晰、checked 合理，就足够了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
