checked属性决定单选按钮默认选中项，存在即选中；动态设置需手动取消同name其他项的checked，并在DOM加载后执行；框架中应更新数据状态而非直接操作DOM属性。
用 checked 属性控制哪个单选按钮默认选中
HTML 单选按钮组（<input type="radio">）的默认选中项由 checked 属性决定，不是靠 value 或 name 推导出来的。只要某个 <input> 元素上存在 checked 属性（哪怕写成 checked="" 或 checked="false"），它就会被选中——浏览器只看属性是否存在，不看值。
所以动态改默认选中项，本质就是：移除旧选项的 checked 属性，给新选项加上该属性。
- 手动操作 DOM 时，用
element.checked = true比element.setAttribute('checked', '')更可靠（后者在某些旧浏览器可能不触发 UI 更新） - 如果用 JS 初始化页面，默认选中逻辑应放在 DOM 加载完成后执行，避免查找不到元素
- 同一组单选按钮必须有相同的
name值，否则它们不会互斥，checked行为也会失效
JS 动态设置时别漏掉「取消其他同名 radio 的 checked」
单选组里只能有一个被选中，但 JS 不会自动帮你取消其他项的 checked 状态。如果你只对目标元素设 checked = true，而没手动清除同 name 的其他项，可能出现多个同时“选中”的假象（尤其在表单重置或多次调用后）。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
function selectRadioByName(name, value) {
const radios = document.querySelectorAll(`input[type="radio"][name="${name}"]`);
radios.forEach(radio => {
radio.checked = (radio.value === value);
});
}
- 这个函数确保每次只一个生效，不用手动维护“上一个选中项”
- 注意
querySelectorAll返回的是静态 NodeList，适合遍历；用getElementsByName返回 HTMLCollection，但需转数组才能用forEach - 如果 value 是空字符串或数字类型，注意用严格相等（
===），避免"1" == 1导致误匹配
Vue/React 等框架里别直接操作 checked 属性
在响应式框架中，直接改 input.checked 可能绕过数据绑定，导致视图和状态不一致。比如 Vue 中用 v-model 绑定一个变量，再用 JS 手动设 checked，UI 会变，但绑定的变量值不变，下次 re-render 就会被覆盖回旧值。
- Vue 应该更新
v-model绑定的数据字段，让框架自动同步到对应 radio - React 中应更新受控组件的
value状态，并确保每个radio的checked属性由该状态计算得出 - 如果必须用原生操作（比如集成第三方库），记得同步更新框架状态，否则后续交互会出问题
表单重置（form.reset()）会覆盖 JS 设置的 checked
很多人在 JS 设置完默认选中后，又调用了 form.reset()，结果发现刚设的选中项没了——因为 reset() 会恢复到 HTML 初始状态，也就是以最初写在 HTML 里的 checked 属性为准，而不是你后来 JS 设置的。
- 如果需要“逻辑重置”到某个特定选项，不要用
form.reset()，而是调用类似上面的selectRadioByName()函数 - 若必须用
reset()，可在 reset 后立刻再次调用选中逻辑（但要注意时机，确保 DOM 已更新） - 服务端返回初始值后动态设默认项，也建议避开依赖 HTML 写死的
checked，统一走 JS 控制，更可控
name 下多个 radio 的 DOM 查找范围是否准确，以及框架场景下是否混淆了“DOM 属性”和“数据状态”。这两点出问题，表现都是“看起来设了，但没反应”或者“点了又跳回去”。 
