浏览器自动提交选中 radio 的 value，只需同 name、设 value、用户选中；后端用对应框架方法获取，未选时不发送该字段。
form 提交时 radio 的值怎么自动发给后端？
只要 name 相同、value 有定义、用户选中了某一项，表单用 method="post" 或 method="get" 提交，浏览器就会把那个 value 和对应的 name 一起发出去——不需要额外 JS 拦截或拼接。
关键点是：name 必须一致，否则后端收不到“一组里只选一个”的语义，而是一堆独立字段。
- 没设
name→ 后端完全收不到这个 radio 的任何数据 -
name值不同（比如name="a"和name="b"）→ 后端收到两个字段，且都可能为空，失去单选逻辑 - 没写
value→ 提交的值是空字符串（不是undefined或null），后端可能误判为“未选择” - 多个 radio 都加了
checked→ 浏览器只认最后一个，但这是 HTML 无效写法，应避免
后端怎么拿到 radio 的值？以 Python Flask 为例
假设前端是这样写的：
Flask 后端用 request.form.get("level") 就能取到字符串，比如 "intermediate"；如果用户没选任何一项，返回 None（不是空字符串）。
- Django 用
request.POST.get("level") - Node.js Express 用
req.body.level（需启用body-parser或express.urlencoded()） - Java Spring Boot 用
@RequestParam String level或绑定到 DTO 字段 - 没选中时，所有框架都收不到该 key —— 这和 checkbox 不同，checkbox 不勾选也会发空值（取决于实现），但 radio 根本不发
为什么 JavaScript 获取不到选中值？常见错误
写 document.querySelector('input[name="level"]:checked') 返回 null，通常不是语法错，而是时机或结构问题：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- JS 代码执行早于 DOM 加载完成 → 放在
<script></script>底部，或用DOMContentLoaded包裹 - radio 被包裹在
里 → 即使视觉上可点，DOM 状态仍是禁用，:checked伪类不匹配 - 用了自定义封装（如 Vue/React 组件）但没同步原生
input的 checked 状态 → 查询的是原始 DOM，不是响应式状态 - name 值带空格或特殊字符（如
name="user level"）→ CSS 选择器要转义，推荐只用字母数字下划线
必须加 required 才能防止漏选吗？
加 required 是最简单防漏手段，但要注意它只在表单提交校验时生效，不影响 JS 获取逻辑。
例如：，如果整组都没选，点击 submit 会弹浏览器默认提示，且 form.checkValidity() 返回 false。
- 不加
required→ 后端必须做空值判断，不能默认“一定有值” - 加了但用户仍可绕过（比如禁用 JS 后手动删掉属性）→ 后端校验不可省略
- 想默认选中一项？直接加
checked属性，如，注意只能有一项带该属性 - 服务端收到空值，别直接报 500，应返回 400 + 明确错误字段，比如
{"error": "level is required"}
真正容易被忽略的，是后端默认认为 radio 字段“总会存在”，结果遇到未选情况就抛异常或存空字符串——其实它根本不会出现在请求体里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
