HTML中radio单选框实现二选一的关键是共享相同的name属性值；若name不同则视为独立控件，导致可多选；JS获取选中值应使用document.querySelector('input[name="xxx"]:checked')?.value；form提交时未选中则字段不发送，需后端兼容空值。
HTML 里 radio 单选框实现二选一，关键不是“加两个 ”，而是让它们属于同一组——必须共享相同的 name 属性值。
为什么加了 type="radio" 还是能多选？
常见错误是漏写或写错了 name：两个 radio 的 name 值不一致（比如一个叫 gender，一个叫 sex），浏览器就认为这是两组独立控件，自然可以各自选中。
正确做法：
-
name值必须完全相同（区分大小写、空格、引号） -
value值应不同，用于后端或 JS 区分选中项 - 建议显式设置
id+label for=...提升可访问性
示例：
<input type="radio" name="agree" value="yes" id="agree-yes"><label for="agree-yes">同意</label> <input type="radio" name="agree" value="no" id="agree-no"><label for="agree-no">不同意</label>
怎么用 JavaScript 获取当前选中的 radio 值？
不能直接对单个 radio 元素查 checked，得先按 name 找到整组，再遍历判断。现代写法推荐用 document.querySelector 配合属性选择器：
-
document.querySelector('input[name="agree"]:checked')返回第一个被选中的元素（没选中时返回null） - 取值用
.value，比如document.querySelector('input[name="agree"]:checked')?.value - 注意：如果页面有多个同名 radio 组（比如两处都用了
name="agree"），这个选择器会命中第一个组里的选中项，不一定符合预期
form 提交时后端收不到 radio 值？
这是高频问题，原因通常有两个：
- 用户没做任何选择 → radio 组没有任何一项被选中 → 浏览器根本不会把该
name发送给后端（不像 checkbox，未勾选的也会发空值） - radio 被包裹在
或父级设了disabled→ 整组失效，即使视觉上可点，也不会参与提交
解决思路：
- 服务端逻辑必须兼容 “该字段完全不存在” 的情况（比如判空、设默认值）
- 如需强制用户选择，用 HTML5 的
required属性（仅对第一个同名 radio 生效，但实际效果是整组必选） - 避免对 radio 父容器使用
disabled，改用fieldset[disabled]并确保只禁用需要的部分
真正容易被忽略的是：radio 的“单选行为”完全由浏览器根据 name 自动管理，没有 JS 也能工作；但一旦混用 JS 动态操作（比如用 click() 模拟点击、或手动改 checked），就必须确保所有操作都基于同一 name 上下文，否则状态和 DOM 会不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
