checked属性必须在HTML中声明以决定初始选中状态，JS赋值仅影响后续状态；模板引擎应根据数据逻辑生成checked，避免JS补设导致闪烁；radio同name下仅首个checked生效；动态创建元素需先挂载再设.checked；框架中用defaultChecked设初始值，配合受控模式。
checked 属性必须写在 HTML 里，JS 赋值不改变初始渲染
页面首次加载时的选中状态，只由 HTML 中是否含有 checked 属性决定；input.checked = true 这类 JS 操作只影响后续运行时状态，无法回溯修正初始快照。
常见错误是：服务端返回的 HTML 没写 checked，却指望 JS 在 DOMContentLoaded 里补上——用户会看到“先没勾、再突然勾上”，体验割裂，且表单提交前若用户快速操作，可能漏掉初始值。
- ✅ 正确做法：模板引擎（如 Jinja、Thymeleaf、EJS）根据数据逻辑，在生成 HTML 时就决定是否插入
checked - ❌ 错误做法：统一用 JS 遍历所有
input[type="checkbox"]再批量设.checked - ⚠️ 注意：
checked="true"或checked="false"是无效写法，浏览器一律当true处理；只写checked即可
同一组 radio 多个 checked 时，只第一个生效
同名 name 的 <input type="radio"> 构成互斥组，HTML 解析器遇到多个 checked，仅以 DOM 中第一个出现的为准；后出现的会被忽略，但代码本身合法——这容易掩盖逻辑错误。
典型场景：模板里用循环渲染选项，条件判断漏了 else 分支，导致多个分支都输出了 checked；或前后端数据不一致，服务端传了两个“默认值”。
立即学习“前端免费学习笔记（深入）”；
- 务必确保：同一
name下，只有一个<input>标签含checked属性 - Vue/React 中应避免手写
checked，改用v-model或checked={value === 'xxx'}+onChange受控模式 - 调试时可直接查看 Elements 面板，确认最终渲染出的 HTML 是否真有且仅有 1 个
checked
动态插入的 checkbox/radio 必须先挂载再设 .checked
用 document.createElement 或 innerHTML 创建的表单元素，如果还没插入 DOM 就执行 el.checked = true，该赋值会被丢弃——浏览器只对已挂载节点维护真实交互状态。
这不是 bug，而是 DOM 规范行为：未挂载元素没有渲染上下文，.checked 属性虽可读写，但不触发 UI 更新或表单逻辑。
- ✅ 正确顺序：
el = document.createElement('input'); el.type = 'checkbox'; document.body.appendChild(el); el.checked = true; - ❌ 错误顺序：
el = document.createElement('input'); el.checked = true; document.body.appendChild(el);→ 初始仍为未选中 - jQuery 用户注意：
.attr('checked', 'checked')只改 HTML 字符串，要用.prop('checked', true)才生效
框架里 checked 属性基本失效，defaultChecked 才管初始值
React 和 Vue 等现代框架接管表单状态，原生 checked 属性被忽略；若只写 checked 不配状态绑定，组件会变成非受控，用户点一次后 JS 状态就脱钩。
比如 React 中：<input type="checkbox" checked /> 渲染出来永远是选中，但 onChange 不触发，也无法通过 state 控制——这是典型的“半受控”陷阱。
- React：用
defaultChecked设初始值，同时必须配checked={state}+onChange才完整 - Vue：用
default-checked（2.x）或v-model（3.x）驱动，不要混用原生checked - 服务端渲染（SSR）场景下，
defaultChecked的值必须和服务端生成的 HTML 一致，否则 hydration 会警告
"edit"，模板要写成 ${permissions.includes('edit') ? 'checked' : ''}，而不是简单地拼字符串或漏掉 else 分支。这个细节一旦出错，前端根本没法靠 JS 补救。 
