radio按钮必须用相同name属性分组才能实现互斥单选，value决定提交值，label需通过for绑定id或隐式包裹来正确关联，默认选中用checked布尔属性，js获取需用[name="x"]:checked选择器并判空。
radio 按钮必须用 name 属性分组才能互斥
单选按钮不会自动“单选”，关键不是 type="radio"，而是所有属于同一组的 radio 必须共享相同的 name 值。浏览器只认 name，不看 id 或标签文字。
- 写成
<input type="radio" name="gender" value="male">和<input type="radio" name="gender" value="female">才能真正单选 - 如果漏掉
name，或两个 radio 的name拼错（比如geneder），它们就各自独立，可同时选中 -
value决定表单提交时发送的值，和界面上显示无关；想控制显示文字，得靠<label></label>配合for或包裹写法
label 标签怎么绑定 radio 才有效
用户点文字也能选中 radio，靠的是 <label></label> 与 input 的正确关联。两种写法都行，但细节容易出错：
- 显式绑定：给
input设id="age_18"，label用for="age_18"——for值必须和id完全一致（区分大小写） - 隐式包裹：把
input直接放进label里，如<label><input type="radio" name="age" value="18"> 18岁以下</label>，不用id和for - 别用
label包裹多个 radio，否则点任意位置都会激活第一个 radio
默认选中用 checked 而不是 selected
selected 是 <option></option> 的属性，对 radio 无效。设默认项只能用 checked：
-
<input type="radio" name="theme" value="dark" checked>—— 注意它是个布尔属性，写checked="true"或checked="checked"都多余，直接写checked就够了 - 同一组里只能有一个
checked，多写也只生效第一个；JavaScript 动态设置用element.checked = true，不是setAttribute('checked', '') - 如果后端返回数据要预设选中，确保模板里只对匹配值的那个 radio 渲染
checked
获取 radio 选中值的 JavaScript 写法
不能直接用 document.querySelector('input[type="radio"]')，那只会拿到第一个，不管它有没有被选中。
- 推荐写法：
document.querySelector('input[name="plan"]:checked')—— 用属性选择器加:checked伪类，安全且简洁 - 如果没选中，结果是
null，记得判空，否则.value会报Cannot read property 'value' of null - 监听变化用
change事件，绑在父容器上更高效（事件委托），例如监听form元素，再过滤event.target.name === 'payment'
document.querySelector('input[name="x"]:checked')?.value。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
