html中checked属性只认存在与否,不解析值;name属性必须完全一致(大小写、空格敏感)才能实现单选互斥;js直接赋值checked需手动触发change事件;表单提交失败常因name不一致、value错误或ssr hydration不匹配。

HTML中checked属性到底认不认值?
只看是否存在,不解析值。写上checked就选中,哪怕写成checked="false"或checked="",浏览器照样当它被勾了。真正“不选中”,得彻底删掉这个属性。
常见翻车现场:
-
<input type="radio" name="mode" value="dev" checked>→ 表面想取消,实际反而选中 -
<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 end>
JS动态设置checked后为啥UI没反应?
直接赋值radio.checked = true只改了属性,不触发change事件——依赖change监听的逻辑(比如更新UI、校验、发请求)全不会跑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
安全做法是:
- 优先用
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"></label>关联,导致用户点文字没反应,误以为“点不动”?
最常被忽略的是:服务端渲染初始值和客户端hydration不一致,尤其SSR项目,checked状态必须和服务端吐出的HTML严格对齐,否则React/Vue会降级接管,造成闪烁或状态错乱。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










