直接设置 checked 属性最可靠：用 radioElement.checked = true/false 控制选中，而非 setAttribute；按 name 分组操作；监听 change 事件响应变化；表单重置会恢复 HTML 初始状态。
直接设置 checked 属性最可靠
想让某个 被选中，不是调用方法，而是直接赋值布尔值给它的 checked 属性。DOM 元素的 checked 是可读写的原生属性，设为 true 就选中，false 就取消（前提是它属于同一 name 组）。
常见错误是试图用 setAttribute('checked', 'checked') —— 这只能影响 HTML 属性，不触发真实选中行为，也不影响同组其他 radio 的自动取消逻辑。
实操建议：
- 用
document.querySelector()或document.getElementById()拿到目标 radio 元素 - 直接写
radioElement.checked = true，不要用setAttribute - 确保所有同名 radio 都在同一个
name属性下，否则浏览器不会自动互斥 - 如果要清空整个单选组，遍历该
name下所有 radio 并设checked = false
用 name 批量操作一组 radio
单选框靠 name 分组，所以动态控制时往往需要按组处理。比如用户点击按钮后“选中第 2 个”，就得先拿到全部同名 radio，再操作指定索引项。
示例：假设有一组 name="theme" 的 radio，想通过 JS 选中 value 为 "dark" 的那个：
const radios = document.querySelectorAll('input[name="theme"]');
for (const radio of radios) {
if (radio.value === 'dark') {
radio.checked = true;
break;
}
}
注意点：
-
querySelectorAll返回的是静态 NodeList，不能用数组方法如find，得用for...of或传统for循环 - 不要用
getElementsByName—— 它返回 HTMLCollection，且在某些旧环境里对动态插入的元素响应不稳定 - 如果 value 是动态生成的，记得检查
radio.value是否存在，避免undefined匹配失败
监听变化要用 change 事件，不是 click
用户手动点击 radio 后，JS 想响应选中变化，必须监听 change，而不是 click。因为 click 在未聚焦或键盘操作（空格键切换）时可能不触发，而 change 确保只要选中状态真正改变就执行。
实操建议：
- 给整个 radio 组的父容器委托监听，或者遍历绑定到每个 radio 上
- 事件回调里用
e.target拿到当前被选中的元素，再读e.target.value或e.target.id - 不要在
change回调里再手动设checked = true—— 此时它已经为 true，重复设置无意义，还可能干扰表单提交逻辑
表单重置后 radio 状态会回到初始 HTML 值
如果页面上有 或调用了 form.reset()，所有 radio 会恢复成 HTML 中带 checked 属性的那个（或第一个，如果没有显式声明）。JS 动态设置的 checked 状态会被清除。
应对方式：
- 如果需要“记住”用户选择，应在
change事件里把值存到localStorage或变量中 - 重置后若想恢复上次选择，需在
reset事件后手动重新设置checked - 避免在
reset前用removeAttribute('checked')清理初始状态 —— 这会让 reset 失效或行为不可预测
真正容易被忽略的是：radio 的“初始状态”只由 HTML 中的 checked 属性决定，JS 设置的 checked = true 不会写回 HTML 属性，也不会影响 reset 行为。这个边界得心里有数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
