加了 checked 却没选中，主因是 JS 覆盖、框架接管或 DOM 插入时机不当；正确写法为直接写 checked（无等号、无引号、无值），属 W3C 布尔属性；radio 同组多 checked 时仅最后解析的生效；JS 应操作 .checked 属性而非 setAttribute；框架中需用 v-model 或 defaultChecked 等机制，避免 HTML 属性与状态脱钩。
加了 checked 却没选中？不是 HTML 写错了，大概率是 JS 覆盖、框架接管，或者 DOM 插入时机不对。
HTML 中 checked 属性怎么写才真正生效
直接写 checked，不带等号、不带引号、不带值——浏览器就认。这是 W3C 定义的布尔属性，存在即为 true。
- ✅ 正确：
<input type="checkbox" name="agree" checked> - ❌ 错误：
<input type="checkbox" name="agree" checked="true">（语义错误，部分模板引擎会过滤空值） - ❌ 错误：
<input type="checkbox" name="agree" checked="">（虽多数浏览器兼容，但 HTML 验证器可能报 warning）
⚠️ 只有在 XHTML 场景下才必须写成 checked="checked"，现代项目基本不用 XHTML。
同一组 radio 里多个 checked 会怎样
同名 name 的 <input type="radio"> 构成一组，浏览器强制单选；如果多个都写了 checked，只有 DOM 中靠后的那个生效。
- 现象：
<input type="radio" name="color" value="red" checked>红</input><input type="radio" name="color" value="blue" checked>蓝</input>→ 页面加载后“蓝”被选中，“红”未选中 - 原因：HTML 解析顺序决定最终状态，后出现的覆盖前一个
- 建议：同一组
radio只给一个写checked，避免歧义和调试困惑
JS 动态设置 checked 的正确姿势
操作 .checked 属性，而不是 setAttribute('checked', ...)。前者改的是 DOM 状态，后者只是改 HTML 字符串。
- ✅ 有效：
el.checked = true或el.checked = false - ❌ 无效：
el.setAttribute('checked', '')—— 不触发浏览器原生互斥逻辑，radio组不会自动取消其他项 - ⚠️ 动态插入元素时（如
innerHTML或document.createElement），必须先挂载到 DOM，再赋值.checked，否则无效
checked 在 React/Vue 中为什么经常失效
因为框架接管了表单状态，HTML 层的 checked 只影响初始渲染，后续完全由 JS 状态驱动。
- Vue：
<input type="checkbox" checked v-model="flag">→checked被忽略，只看flag初始值 - React：
defaultChecked仅设初值，若没配checked和onChange，就成了非受控组件，用户点一次后状态脱钩 - jQuery：
.attr('checked')返回属性字符串，.prop('checked')才返回真实布尔状态，别混用
最常被忽略的点是：动态插入后没等元素挂载就操作 .checked，或者在框架里还试图靠纯 HTML 属性控制状态。这两类问题几乎占了所有“明明写了 checked 却不生效”的 80% 以上。
