单选按钮必须设置相同name属性才能实现单选逻辑，否则各按钮独立可选；需用label包裹或id+for关联文字以扩大点击区域；获取选中值时须判空防止报错。
单选按钮不是加个 type="radio" 就能用的，核心在于分组逻辑——没设对 name，就根本不是“单选”，而是多个独立可选的按钮。
为什么点了两个还都选中？
这是最常见也最容易被忽略的问题：浏览器只靠 name 属性判断是否属于同一组。如果漏写 name，或者复制时写成 name="opt1"、name="opt2" 这种不同值，那它们彼此毫无关系，自然可以同时选中。
- 必须显式写出相同
name，比如全部是name="theme" -
name大小写敏感，"Theme"和"theme"是两组 - 别依赖默认行为，不写
name就等于放弃单选逻辑
怎么让文字也能点中？
原生 input[type="radio"] 点击热区极小，直接点文字无效，用户会以为“点不动”。必须把文字和控件关联起来，否则移动端基本不可用。
- 推荐用
<label><input type="radio" name="x">选项文本</label>包裹式写法，简洁可靠 - 避免单独写
id+for，容易拼错或重复，且多一层 DOM 管理 - 不要只靠 CSS 改
width/height，那只是视觉放大，实际可点击区域没变
获取选中值时容易报错的地方
document.querySelector('input[name="xxx"]:checked') 是最简方式，但它返回 null（不是 undefined），直接取 .value 会崩。
- 务必判空：
const el = document.querySelector('input[name="plan"]:checked'); const val = el ? el.value : null; - 别用
getElementsByName配循环，性能差，代码啰嗦 - 别假设一定有默认选中项——用户可能还没点，或者你忘了加
checked
真正难的不是写出来，而是 name 值是否全局唯一又语义清晰、value 是否前后端对齐、以及 label 是否真能让手指点准。这些细节一漏，表单就变成“看起来能用，实际总出错”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
