清空 radio 需手动遍历同 name 所有元素设 checked = false；form.reset() 仅恢复 HTML 初始状态，不响应 JS 动态修改；框架中应通过数据绑定重置而非直接操作 DOM。
点击按钮时如何清空所有 radio 选择
原生 HTML 中没有直接的 reset() 方法能单独清空某组 radio，但表单整体重置是可行的。如果只想清空特定一组（比如 name="gender"），必须手动操作：遍历同名 input[type="radio"] 并设 checked = false。
常见错误是只写 document.querySelector('input[name="gender"]').checked = false —— 这只会命中第一个，漏掉其余选项。
- 正确做法是用
document.querySelectorAll('input[name="gender"]')获取全部，再逐个清除 - 注意：不能用
getElementsByName返回的集合直接 forEach，它不是真数组，需转成数组或用 for 循环 - 若该组 radio 有默认选中项（
checked属性在 HTML 中），JS 清除后仍会保留属性值，但行为已不受影响；如需彻底还原初始状态，得配合表单reset()
表单初始化时避免默认选中残留
很多开发者以为不写 checked 就一定无默认选中，但实际可能被浏览器缓存、JS 动态设置、或服务端模板注入干扰。初始化阶段最稳妥的方式是在 DOM 加载完成后统一清理。
- 推荐时机：在
DOMContentLoaded或 Vue/React 的 mounted 阶段执行 - 可封装函数：
clearRadioGroup("payment_method")，内部做querySelectorAll+ 循环设checked = false - 如果表单含多个 radio 组，批量处理时注意别误清其他 name 的控件
- 某些旧版 iOS Safari 对刚插入 DOM 的 radio 清除无效，需加
setTimeout(..., 0)延迟执行
form.reset() 能否清空 radio？有什么限制
可以，但只对具有 name 属性且**在表单内声明初始状态**的 radio 生效。也就是说，如果某个 radio 在 HTML 中没写 checked，form.reset() 后它就是未选中；但如果 JS 曾动态设过 checked = true，而原始 HTML 没声明默认项，reset() 不会把它“恢复”成未选中——因为它的初始状态本来就是未选中。
- 关键点：
reset()恢复的是 HTML 中定义的初始值，不是 JS 当前状态 - 若用 JS 创建了新 radio 并 append 到表单，它们不在初始 DOM 中，
reset()完全不管理它们 - 使用前确认表单元素确实属于该
form元素（检查是否漏写form="form-id"或嵌套错误）
Vue/React 中怎么安全重置 radio 组
框架里不要直接操作 DOM 的 checked，否则会破坏响应式绑定。应通过数据驱动更新。
- Vue：把 radio 绑定到一个 data 字段（如
v-model="selectedGender"），重置只需this.selectedGender = ""或null - React（受控组件）：同理，设对应 state 为
""，并确保每个radio的value和checked正确映射 - 坑点：若初始 state 是
undefined，而 radio 的value是字符串，比较时undefined == "male"为 false，表现正常；但若设成null，某些版本 React 会警告非受控变受控 - 非受控场景（不推荐）：用
ref+form.reset()，但失去框架状态同步能力
清空 radio 看似简单，真正麻烦的是边界情况：动态添加的选项、跨框架混用、浏览器自动填充、以及「初始状态」到底指 HTML 还是 JS 第一次赋值——这些地方一不留神就回不到预期状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
