radio的checked属性必须赋布尔值true/false，字符串赋值无效；应使用element.checked = true并触发change事件；批量操作需按name获取全部radio并比对value；框架中应通过数据绑定而非直接操作DOM。
radio单选框的 checked 属性不能靠赋值字符串来修改
直接写 element.checked = "true" 或 element.checked = "checked" 是无效的。JS 中 checked 是布尔属性，只认 true 或 false，传字符串会被强制转为 true（连空字符串都是），结果不可控。
常见错误现象：点击按钮后看似“选中了”，但后续 form.submit() 时后端收不到值，或 document.querySelector('input[name="x"]:checked') 查不到元素——本质是 DOM 状态没真正更新。
- 正确做法是赋值
element.checked = true（注意是布尔字面量，不是字符串） - 修改后建议触发
element.dispatchEvent(new Event('change', { bubbles: true }))，否则依赖change事件的逻辑（如 Vue 的 v-model、React 的受控组件、自定义校验）可能不响应 - 若用
setAttribute('checked', 'checked')，仅影响 HTML 属性，不会同步 DOM 的checked内部状态，同样不可靠
通过 name 批量操作 radio 组，避免硬编码 DOM 查询
radio 是按 name 分组的，同一组内只能有一个被选中。手动遍历所有同名 input[type="radio"] 并逐个设 checked = false 很容易漏掉或误操作。
更稳妥的方式是先获取整个组，再根据 value 定位目标项：
function setRadioChecked(name, value) {
const radios = document.querySelectorAll(`input[type="radio"][name="${name}"]`);
radios.forEach(radio => {
radio.checked = (radio.value === value);
if (radio.checked) {
radio.dispatchEvent(new Event('change', { bubbles: true }));
}
});
}
// 调用：setRadioChecked('gender', 'female');
- 注意
querySelectorAll返回的是静态 NodeList，不用考虑动态插入的新 radio - 如果页面中存在多个同名 radio 组（比如不同 form 里重名），这个函数会一并处理，需确保 name 全局唯一，或加父级限定（如
#form1 input[type="radio"][name="..."]） - 不推荐用
getElementsByName，它返回 HTMLCollection，且在某些旧浏览器中对动态添加的元素响应不一致
Vue/React 环境下不要直接操作 DOM 的 checked
在 Vue 中用 v-model、React 中用 value + onChange 管理 radio 时，直接改 element.checked 会破坏框架的数据流，导致视图与状态不一致（比如 React 中 state 没变但 DOM 显示变了）。
- Vue 场景：应修改绑定的 data 属性，如
this.selectedGender = 'male'，让v-model自动同步 DOM - React 场景：应调用
setState({ gender: 'female' })，并在onChange里统一处理，而不是ref.current.checked = true - 只有在必须绕过框架（如集成第三方库、修复 legacy 代码）时，才用 DOM 操作，并且之后要手动同步状态，否则极易引发难以调试的竞态问题
移动端 click 事件失效？试试 change 事件监听
部分安卓 WebView 或 iOS Safari 在 radio 上监听 click 可能不触发，尤其当 label 包裹 radio 或用了伪元素遮罩时。而 change 事件只要选中状态真实改变就一定触发，兼容性更稳。
- 绑定事件优先用
element.addEventListener('change', handler)，而非click - 如果需要“点击即生效”反馈（比如按钮立刻变色），可在
change回调里同步更新 UI，不要等click - 测试时务必在真机上验证，模拟器有时掩盖了底层事件分发差异
实际操作中最容易忽略的是事件冒泡和框架状态同步——DOM 改了，但 JS 状态没跟上；或者事件没触发，UI 却看起来“动了”。这两点一旦出问题，调试成本远高于写几行正确赋值代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
