同一组radio多个checked只留一个，浏览器按DOM顺序取最后一个生效；应避免多个checked，JS用.checked而非setAttribute，动态插入需先挂载再赋值，框架中由状态驱动，disabled时需先解除禁用才能修改checked。
同一组radio多个checked只留一个
同名name的<input type="radio">构成逻辑组，浏览器强制单选；如果HTML里写了多个checked，只有DOM中靠后的那个生效。比如：
<input type="radio" name="theme" value="dark" checked> 深色</input> <input type="radio" name="theme" value="light" checked> 浅色</input>
页面加载后“浅色”被选中，“深色”不会选中——不是bug，是解析顺序决定的。
- 确保同一组只给一个
input写checked - 别依赖多个
checked来“保险”，反而造成调试困惑 - 服务端模板（如Django、Nunjucks）生成时，要条件判断，避免多个分支都输出
checked
JS动态设置用.checked，别用setAttribute
用el.setAttribute('checked', '')只是改HTML字符串，不触发浏览器原生互斥逻辑，radio组不会自动取消其他项；而el.checked = true直接改DOM状态，会同步影响表单提交和组内互斥。
- ✅ 正确：
document.querySelector('[value="light"]').checked = true - ❌ 无效：
el.setAttribute('checked', 'true')或el.setAttribute('checked', '') - 动态插入元素（如
innerHTML或document.createElement）后，必须先挂载到DOM，再赋值.checked，否则无效
框架里checked属性基本没用
React/Vue等框架接管表单状态，HTML层的checked只影响初始渲染，后续完全由JS状态驱动。
立即学习“前端免费学习笔记（深入）”；
- Vue中：
<input type="radio" v-model="theme" value="light">→ 删掉checked，靠theme初始值控制 - React中：
defaultChecked仅用于初始化，若同时没配checked和onChange，会变成非受控组件，用户点击后状态脱钩 - jQuery里：
$(el).prop('checked', true)才有效；.attr('checked', true)是错的，因为attr操作attribute，prop操作property
disabled状态下checked无法通过JS修改
disabled的radio会被浏览器锁定：即使你在开发者工具里手动改checked属性，或执行el.checked = true，都不会生效。
- 必须先设
el.disabled = false，再设el.checked = true，最后可再设回disabled = true（如果需要视觉禁用但保持选中） - 不能用
readonly替代——<input type="radio">根本不支持readonly属性 - 模拟禁用交互但保留状态，可用
onclick="return false"，这样checked仍可通过开发者工具或JS修改
disabled带来的隐性锁定——这些地方一不留神就让checked看起来“失效”了。 
