同一组单选按钮必须使用完全相同的name属性(区分大小写与符号)才能实现互斥选择;value提交真实值,需简洁规范;默认选中用checked布尔属性;必须配合label提升可用性。

同一组radio必须用相同name才能互斥
浏览器只靠name识别单选组,不是id、不是文字内容、也不是CSS类名。只要name值完全一致(大小写、空格、符号都算),这一组就只能选一个。
常见错误:复制粘贴时改了value却漏改name,结果变成两组独立单选框;或者写了name="gender"和name="Gender",被当成不同组。
-
name必须是合法的标识符,避免空格、中文、点号(如user.info)——IE11 和部分旧 WebView 会解析失败 - 服务端接收时也靠这个
name取值,前后端要对齐,比如后端 expectrequest.form["category"],前端就必须写name="category" - 如果一组里混用了不同
name,用户看似能点多个,其实是“各自为政”,提交时可能只发最后一个选中的(行为不可靠)
value才是提交给后端的真实值,不是显示文字
用户看到的是label里的文字,但表单提交时,服务器收到的只有value属性的字符串。哪怕你写,后端拿到的也是"2",不是"高级"。
- 别把中文或带空格的描述直接塞进
value,比如value="非常满意"——URL 编码后变%E9%9D%9E%E5%B8%B8%E6%BB%A1%E6%84%8F,难读难调试 - 建议用简短、语义清晰的英文或数字,如
value="pro"、value="3"、value="subscribe" - 如果需要映射回中文显示,应在后端或 JS 层做字典转换,而不是靠
value硬编码
默认选中必须用checked,且同组只能有一个
加checked属性即生效,不需要checked="true"或checked="checked"——它是个布尔属性,存在即为真。
但要注意:如果同组多个radio都写了checked,浏览器通常以 DOM 中最后一个为准,可行为不一致(尤其在 JS 动态插入后)。这不是规范行为,应主动避免。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 服务端渲染时,由逻辑决定哪个
radio带checked,比如根据数据库字段值匹配value - 纯静态页面,确保只有一个
checked,例如:和 - JS 动态设置时,别直接改
checked=true而不清理同组其他项——推荐用document.querySelector('input[name="theme"]:checked')先查当前,再设新值
必须搭配label,否则点击文字无法触发选中
原生radio只有小圆圈可点,热区极小。不加label,用户得精准点击像素级区域,移动端基本没法用。
正确方式有两种:
- 显式关联:
—— 注意for值必须和id完全一致 - 隐式嵌套:
—— 更简洁,语义更牢,但需确保input在label内部
两种都提升可访问性(屏幕阅读器能读出关联文字),也避免因id重复或拼错导致点击失效——这是上线后最常被忽略的体验断点。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










