直接用 document.queryselector('input[name="gender"]:checked')?.value || '' 获取单选按钮组选中值，监听父容器 change 事件委托更高效，表单提交依赖原生 name 和 checked 属性，value 必须在 html 中明确定义为字符串。
用 document.querySelector 直接获取选中项的 value
单选按钮组（<input type="radio">）共享同一个 name 属性，浏览器会自动保证同名组内最多一个被选中。所以不需要遍历所有按钮，直接查「已选中的那个」最高效。
常见错误是用 document.querySelectorAll('input[name="xxx"]') 然后循环判断 checked —— 完全没必要，多写几行还容易漏判未选中情况。
- 确保所有单选按钮的
name属性值完全一致（区分大小写、空格） - 用
document.querySelector('input[name="gender"]:checked')获取当前选中的 DOM 元素；如果没选中，返回null - 安全取值写法：
const val = document.querySelector('input[name="gender"]:checked')?.value || ''
change 事件监听比 click 更可靠
用户切换选项时，change 在焦点离开或选项确认后触发，能准确反映最终选择；而 click 可能在用户点中又点出时误触发（比如连点两次同一项）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听整个组的父容器更简洁：
form.addEventListener('change', e => { if (e.target.name === 'plan') console.log(e.target.value); }) - 不要给每个
input单独绑change，浪费内存；委托到父级即可 - 注意：如果单选组初始无默认选中项，第一次选中会触发
change；但若已有checked，刷新页面后不会再次触发
表单提交时怎么让后端收到值
只要单选按钮有 name 且至少一项带 checked，表单提交时就会把 name=value 发出去；没选中则不发送该字段 —— 这是 HTML 原生行为，不用 JS 干预。
- 后端收不到值？先检查是否漏写了
name，或所有按钮都漏了checked（导致无值提交） - 避免用
disabled禁用选项：它会导致该选项完全不参与提交，哪怕它被选中 - 如果必须有默认值，推荐在 HTML 中显式写
<input name="mode" value="auto" checked>，而不是靠 JS 补
用 FormData 批量读取更省心
当表单里不止单选，还有文本框、复选框等其他控件时，统一用 FormData 提取最稳，不用单独处理每种类型。
-
const fd = new FormData(formElement); const val = fd.get('theme');—— 自动返回选中项的value，未选中则返回null -
fd.getAll('hobby')对复选框有效，但对单选按钮组始终只返回一个值（和get一样） - 注意：
FormData不包含disabled的字段，也不读取动态添加但未插入 DOM 的节点
value 必须是字符串，且不能只依赖 JS 设置 —— 如果初始 HTML 里没写 value，浏览器会默认用 "on"，后端很可能收错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
