checked属性必须直接写在HTML标签中（如checked）才能控制初始选中状态，JS赋值element.checked=true仅影响运行时状态；错误写法包括checked="true"、checked=""或selected，后者专用于<option>。
checked属性必须写在HTML里，JS赋值不改变初始状态
页面首次加载时的默认选中状态，只由 HTML 标签是否包含 checked 属性决定。写上就默认勾选，不写就不勾选——浏览器根本不看它的值，也不执行 JS 逻辑。
常见错误是：服务端返回的 HTML 没加 checked，却指望在 DOMContentLoaded 里用 el.checked = true 补上。结果用户看到“先没勾、再闪一下勾上”，表单提交前快速操作还可能漏掉初始值。
-
checked是布尔属性，只写checked即可，checked="true"、checked="false"、checked=""全部等效于“选中” - 不要用
selected，那是<option>的属性，对input[type="checkbox"]或input[type="radio"]完全无效 - 模板引擎（如 Jinja、EJS、Django）必须根据真实数据逻辑，在生成 HTML 阶段就决定是否插入
checked
同一组 radio 只能有一个 checked，name 必须严格一致
多个 input[type="radio"] 构成单选组的前提是：name 属性完全相同（大小写、空格、下划线都不能差）。否则它们互不影响，可能出现多个都带 checked 却都显示为选中的情况。
即使写了多个 checked，浏览器也只认 DOM 中第一个出现的；后出现的不会报错，但被忽略——这容易掩盖模板循环里的条件判断漏洞。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<input type="radio" name="theme" value="dark" checked>和<input type="radio" name="theme" value="light"> - 错误写法：
<input type="radio" name="theme" value="dark" checked>和<input type="radio" name="Theme" value="light">（name 大小写不同） - 调试时直接看 Elements 面板，确认最终渲染出的 HTML 是否真有且仅有一个
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 用户注意：
$('input').attr('checked', 'checked')是过时写法，应改用.prop('checked', true)，但前提是元素已挂载
框架中别硬写 checked，用受控模式替代
Vue/React 等框架接管了表单状态，直接在标签上写 checked 属性会被忽略。强行写会导致视图与状态不一致，比如初始渲染正确，但用户交互后无法响应。
- Vue 推荐用
v-model绑定布尔值，或显式写:checked="value === 'xxx'"+@change - React 推荐用
checked={state}+onChange实现受控组件 - 若需模拟“默认值”，应在组件初始化 state 时设置，而不是靠 HTML 的
checked属性 - 使用
defaultChecked（React）或default-value（Vue）仅适用于非受控场景，且只生效一次
checked 控制“第一次打开页面时长什么样”，而 JS 或框架的数据控制“之后它变成什么样”。这两套逻辑不互通，混用却不分清，问题就藏在刷新那一瞬间。 
