直接用 document.queryselector('input[name="gender"]:checked')?.value 获取单选框选中值，需加可选链防 null；change 事件比 click 更可靠；框架中应避免直接操作 dom，改用状态管理。
用 document.querySelector 直接获取选中项的 value
单选框（<input type="radio">）同一组靠 name 属性关联，浏览器只允许一个被选中。最直接的方式是用 document.querySelector 找到当前被选中的那个元素，再取它的 value：
const selectedValue = document.querySelector('input[name="gender"]:checked')?.value;
注意加可选链 ?.value —— 如果没选项被选中，querySelector 返回 null，不加会报 Cannot read property 'value' of null 错误。
- 必须指定
name值，否则可能匹配到页面其他 radio -
:checked伪类只匹配当前选中状态，不依赖事件监听 - 如果用
getElementById或getElementsByName，得自己遍历判断checked，更啰嗦
监听 change 事件实时捕获值变化
用户点击切换选项时，需要立刻响应，就得绑定 change 事件（不用 click，因为键盘空格也能触发选中，change 更可靠）：
document.querySelectorAll('input[name="plan"]').forEach(radio => {
radio.addEventListener('change', function() {
if (this.checked) {
console.log('选中值：', this.value);
}
});
});
关键点：
- 事件回调里用
this.value，不是event.target.value—— 因为change触发时，只有当前被选中的元素会进入回调，this就是它本身 - 不要在
click里读value，可能读到旧值（比如从 A 切到 B，click在 A 上触发时 A 还没取消选中） - 如果单选组动态插入，要用事件委托，监听父容器的
change，再判断event.target.name === 'xxx'
没有默认选中项时，querySelector 返回 null 的处理
HTML 中没写 checked 属性，JS 就拿不到值，这是常见疏漏。别指望表单提交时后端能兜底 —— 前端该校验就得校验：
- 初始化时检查：
if (!selectedValue) { alert('请选择一项'); return; } - 提交前验证比依赖
:checked更稳妥，尤其当用户用 JS 清除了所有选项 - 服务端永远要二次校验，前端值可被篡改，
value字符串本身不带可信标记 - 若需“未选择”语义，建议显式加一个
<input type="radio" name="x" value="">无偏好，而不是留空
React/Vue 等框架里别直接操作 DOM
在 React 中，不要用 document.querySelector 读 radio 值 —— 它绕过状态管理，容易和组件 state 不同步：
- React：用
useState绑定value，radio 的onChange更新 state - Vue：用
v-model双向绑定，值自动同步 - 强行查 DOM 可能读到旧值，尤其在异步更新或 useEffect/useEffect 时机不对时
- SSR 场景下，
document不存在，querySelector会直接报错
原生 JS 场景下管用的方法，在框架里往往是反模式。真要兼容，优先走框架的数据流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
