最可靠方式是document.queryselector('input[name="gender"]:checked')获取选中元素再取.value；未选中返回null，需主动判断。
JavaScript中用document.querySelector获取单选框选中值最可靠
直接用document.querySelector('input[name="gender"]:checked')拿到被选中的input元素，再取.value——这是现代浏览器里最简洁、最不容易出错的方式。它天然规避了“没选任何项就报错”的问题，因为没选中时返回null，你可以主动判断：
const selected = document.querySelector('input[name="gender"]:checked');<br>const value = selected ? selected.value : '';
用FormData一次性读取整个表单值（含单选框）
如果你的单选框在<form></form>内，且后续还要处理其他字段（比如文本框、下拉框），别一个个手动查，直接用FormData：
const form = document.querySelector('#myForm');<br>const data = new FormData(form);<br>const gender = data.get('gender'); // 返回字符串，未选则为null注意：FormData.get()对单选框只返回一个值，符合预期；但对多选框或同名多个输入框会只取第一个——这点和querySelectorAll行为不同，得心里有数。
监听单选框变化时，别绑定到每个input上
给每个input[type="radio"]单独加change事件监听器，既冗余又难维护。正确做法是事件委托，绑定到父容器或form上：
form.addEventListener('change', (e) => {<br> if (e.target.name === 'gender' && e.target.type === 'radio') {<br> console.log('选中值：', e.target.value);<br> }<br>});这样新增选项不用改 JS，也避免重复绑定。另外，change比click更稳妥——用户用键盘空格切换时，click可能不触发。
后端接收不到值？检查name属性和value是否都写了
常见漏掉的是value属性：
<input type="radio" name="level" id="l1"><label for="l1">初级</label>这样提交时后端收不到
level字段——因为没value，浏览器默认发空字符串甚至忽略该控件。必须写成：<input type="radio" name="level" value="junior" id="l1">另外，所有同组单选框
name必须完全一致（包括大小写和空格），否则浏览器认为是不同组，无法互斥。
真正容易被忽略的是：单选框初始状态为空时，FormData和querySelector都返回null或undefined，而不是空字符串。如果后端接口要求字段必传，前端得自己补默认值，不能指望浏览器自动填。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
