checked属性唯一合法写法是不带等号、引号和值，仅存在即生效；同组单选框仅首个checked生效；.checked控制运行时状态，与初始属性不同步；提交时仅.checked为true的控件才发送数据。
checked属性怎么写才真正生效
只写checked，不带等号、不带引号、不带值——这是唯一符合 HTML5 规范的写法。浏览器看到这个属性存在，就当它是 true；没这个属性，就是 false。
常见错误：checked="true"、checked="checked"、checked=""。它们在多数浏览器里也能“看起来”生效，但属于语义错误：W3C 规范明确把 checked 定义为布尔属性，只认“存在与否”，不读取值。服务端模板（如 Django、Thymeleaf）或 HTML 验证工具可能直接忽略或报错。
正确示例：<input type="radio" name="theme" value="dark" checked><input type="checkbox" name="agree" value="1" checked>
同一组单选框为什么只认第一个checked
浏览器强制保证同名 name 的 <input type="radio"> 是互斥组。即使你给多个都写了 checked，它只按文档顺序取第一个出现的生效——后面那些 checked 属性被忽略，但 HTML 本身是合法的。
这容易导致逻辑混乱，尤其在服务端动态渲染时：比如模板变量判断出错，意外给两个选项都插入了 checked，结果默认值和预期不符，且难以排查。
必须确保：
- 所有同组 radio 的 name 值完全一致（大小写敏感）
- 同一组中仅一个元素带 checked 属性
- 若用 JS 动态生成，别在循环里无条件加 checked，得加条件判断
JS 设置.checked = true 为什么页面没反应
因为 checked 属性只管**初始渲染**，而 .checked 是 DOM 属性，控制**运行时状态**。两者不自动同步。如果你在 DOM 加载完后执行 radio.checked = true，视觉和行为都会变；但如果你在元素还没挂载到文档里时就赋值（比如刚 document.createElement('input') 完），这个赋值会被丢弃。
更隐蔽的问题：
- 框架（Vue/React）接管表单后，原生 checked 属性只起初始化作用，后续完全由数据驱动
- 直接操作 .checked 不会触发 change 事件，依赖该事件的校验或联动逻辑不会执行
- 想模拟用户点击效果，优先用 element.click()，它既更新状态又触发事件链
表单提交时哪些值会被发送
只有当前 .checked === true 的复选框和单选框，才会出现在 FormData 或传统表单提交的数据里。未选中的控件，无论有没有写 checked 属性，都不传。
关键细节：
- 复选框若未勾选，对应字段**彻底消失**，不是 key=，而是连键都不在请求体里
- 单选框组里如果没有一个 .checked === true，整个 name 字段都不会提交
- 这意味着：服务端不能假设某个字段一定存在，必须做空值判断
最容易被忽略的是异步初始化场景——比如页面加载后才从 API 拿到默认值，再用 JS 设置 .checked。此时如果用户没手动操作就直接提交，那一组 radio 可能仍是全未选中状态，导致后端收不到该字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
