原生 radio 不支持点击已选项取消选中，需用 JavaScript 在 mousedown 阶段拦截并手动设 checked = false；清空同名组需遍历所有元素；无默认选中时提交不含该字段，reset() 无效。
点击已选 radio 时如何取消选中
HTML 原生 <input type="radio"> 不支持点击已选项取消选中——这是浏览器的默认行为，不是 bug。如果需要“可取消”的单选逻辑，必须用 JavaScript 拦截并手动控制。
常见错误是直接给 onclick 里写 checked = false，但此时事件触发时，浏览器已经把新状态（true）设好了，再赋值 false 会被下一次渲染覆盖。正确做法是在 click 事件中阻止默认行为，或改用 mousedown 阶段判断并干预。
- 推荐监听
mousedown：此时浏览器还没更新checked状态，可以安全判断是否已选，并调用preventDefault()+ 手动设checked = false - 避免在
change事件里操作，它只在状态真正改变后触发，无法拦截“从 true 切回 false” - 注意：移动端需同时处理
touchstart，否则 iOS Safari 上点击无效
用 JavaScript 清空整组 radio 的选中状态
要清空一组同名 radio（即 name 相同的所有项），不能只对某个元素设 checked = false，必须遍历全部并重置。
最简方式是获取所有同名 radio 元素，逐个清除：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
document.querySelectorAll('input[type="radio"][name="gender"]').forEach(radio => {
radio.checked = false;
});
注意点：
-
querySelectorAll返回的是静态 NodeList，兼容性好；不用getElementsByName，它返回 HTMLCollection，在某些老版本 IE 中对checked属性操作不稳定 - 如果该组 radio 分布在不同 form 内，确保选择器能覆盖到全部（比如加 class 或用更宽泛的父容器限定）
- 清空后，
form.checkValidity()和相关约束校验会重新计算，可能影响:validCSS 样式
radio 组没有默认选中项时的兼容性陷阱
当所有 radio 的 checked 属性都未声明（即 HTML 中没写 checked），且 JS 也没主动设置过，那么整个组的值就是“未选中”——这本身合法，但容易引发两个实际问题：
- 表单提交时，该
name字段**完全不会出现在 FormData 中**，后端收不到键名，而非收到空值；若后端依赖该字段存在，需提前约定或补默认值 - 使用
form.elements["name"]获取时，返回的是 radio 元素集合，但form.elements["name"].value为undefined，不能直接读取 - Vue/React 等框架绑定时，若初始
v-model或value为null或undefined，需确保对应的 radio 有显式checked同步，否则视图与数据脱节
用 reset() 方法清空 radio 但不重置整个表单
form.reset() 会把所有控件恢复到初始 HTML 状态，包括 radio —— 但前提是初始 HTML 中至少有一个 radio 带 checked 属性。如果初始就没有选中项，reset() 也不会让它变“有选中”，而是维持全未选中。
所以，若想“只清空 radio，不动其他字段”，不能靠 reset()，得单独处理：
- 先缓存其他字段值（如
const textVal = input.value） - 执行 radio 清空逻辑
- 再把缓存的值设回去（注意避开被清空逻辑误伤的字段）
- 更稳妥的做法是封装一个
clearRadioGroup(name)函数，复用时只传 name，不碰 form 结构
这个细节常被忽略：看似只是清个单选框，实则牵扯表单状态一致性、后端接收逻辑、以及框架响应式更新时机。
