checked属性需直接写为checked才真正生效，是w3c定义的布尔属性；radio组中多个checked时仅最后一个生效；js应操作.checked属性而非setattribute；框架中需用defaultchecked+checked+onchange配合。
加了 checked 却没选中？不是你写错了，大概率是 JS 覆盖、框架接管、或 DOM 插入时机不对。
checked 属性怎么写才真正生效
直接写 checked，不带等号、不带引号、不带值——浏览器就认。这是 W3C 定义的布尔属性，存在即为 true。
- ✅ 正确：
<input type="checkbox" name="agree" checked> - ❌ 错误：
<input type="checkbox" name="agree" checked>（语义错误，部分模板引擎会过滤空值） - ❌ 错误：
<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 type="radio" name="color" value="blue" checked>蓝→ 页面加载后“蓝”被选中，“红”未选中 - 原因：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，否则无效 - React/Vue 场景下：
checked属性会被框架忽略，要用defaultChecked（仅初始）+checked+onChange（受控）配合
为什么 checked 在框架里经常失效
因为框架接管了表单状态，HTML 层的 checked 只影响初始渲染，后续完全由 JS 状态驱动。
- Vue：
<input type="checkbox" checked v-model="flag">→checked被忽略，只看flag初始值 - React：
defaultChecked仅设初值，若没配checked和onChange，就成了非受控组件，用户点一次后状态脱钩 - jQuery：
.attr('checked')返回属性字符串，.prop('checked')才返回真实布尔状态，别混用
最易被忽略的一点：服务端模板（如 Django、Nunjucks）里拼 checked 时，条件判断漏掉 false 分支，导致生成了 checked="" 或空字符串，被 HTML 解析器当成了有效布尔属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
