HTML中checked属性只认存在与否，不解析值；name属性必须完全一致（大小写、空格敏感）才能实现单选互斥；JS直接赋值checked需手动触发change事件；表单提交失败常因name不一致、value错误或SSR hydration不匹配。
HTML中checked属性到底认不认值？
只看是否存在，不解析值。写上checked就选中，哪怕写成checked="false"或checked=""，浏览器照样当它被勾了。真正“不选中”，得彻底删掉这个属性。
常见翻车现场：
-
<input type="radio" name="mode" value="dev" checked="false">→ 表面想取消，实际反而选中 -
<input type="radio" name="mode" value="prod">→ 没写checked，才真的不选
为什么name不一致会导致多个都“默认选中”？
单选的排他性完全靠name绑定。只有name完全相同（大小写、空格、下划线全敏感）的一组<input type="radio">，才能互斥。name不同，就是独立控件，各自管各自的checked。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 拼写必须一字不差：
name="theme"和name="Theme"是两组 - 推荐全小写+短横线：
name="user-preference"，避免前后端解析歧义 - 服务端模板里用条件插
checked，比如：<input name="lang" value="zh" {{ if eq .Lang "zh" }}checked{{ end }}>
JS动态设置checked后为啥UI没反应？
直接赋值radio.checked = true只改了属性，不触发change事件——依赖change监听的逻辑（比如更新UI、校验、发请求）全不会跑。
安全做法是：
- 优先用
radio.click()：它既选中，又触发原生事件链 - 如果必须用
checked = true，得手动补事件：radio.dispatchEvent(new Event('change', { bubbles: true })) - 确保DOM已挂载：在
DOMContentLoaded后操作，或用requestAnimationFrame延迟执行 - 框架场景（React/Vue）别混用
defaultChecked和checked：defaultChecked只生效一次，checked会强制接管，容易和state打架
表单提交时没拿到值？先查这三件事
默认选中了但FormData.get()取不到、后端收不到值，大概率是基础配置漏了。
逐项核对：
- 所有同组radio是否都有
name，且值完全一致？ - 被
checked的那个，value有没有写错（比如空格、大小写）？ - 有没有漏掉
<label for="xxx">关联，导致用户点文字没反应，误以为“点不动”？
最常被忽略的是：服务端渲染初始值和客户端hydration不一致，尤其SSR项目，checked状态必须和服务端吐出的HTML严格对齐，否则React/Vue会降级接管，造成闪烁或状态错乱。
