radio组必须name属性完全一致才能互斥，且至少一个设checked，否则提交时字段可能丢失；value应为简洁ASCII字符串，前后端需严格约定。
name属性写错或不统一，radio就根本不算一组
浏览器只靠 name 属性识别哪些 input type="radio" 属于同一组。如果拼写不一致（比如 user_gender 和 userGender），或者漏写 name，它们就各自独立，无法互斥，提交时可能只发最后一个被点的值，甚至一个都不发。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
name值统一用小写字母 + 下划线，例如payment_method、notification_preference - 别用
id代替name——id只用于 DOM 定位或<label for="xxx"></label>关联 - 检查所有同组 radio 的
name是否完全一致（包括大小写、空格、下划线）
没设 checked，后端可能收不到该字段
HTML 表单提交时，只有被选中的 radio 才会把 name=value 发出去；如果用户没点过任何选项，且没有默认 checked，那这个字段压根不会出现在 POST/GET 数据里。PHP 中 $_POST['xxx'] 会报未定义，JS 里 FormData 也取不到。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 后端日志里完全找不到该字段名
- 后端收到空字符串：检查是否写了
value=""或value=" "（带空格） - 用户跳过该组直接提交，表单校验没拦住
实操建议：
- 每组至少设一个
checked，例如：<input type="radio" name="theme" value="dark" checked> -
required属性对 radio 组有效，但前提是已有checked或用户手动点过；纯靠required不设checked，无法阻止提交
JavaScript 获取选中值不能直接 .value，得先找 :checked 元素
你不能对整个 radio 组调用 .value，因为 document.querySelectorAll('input[name="x"]') 返回的是 NodeList，每个元素单独有 value，但没被选中就不是你要的值。
正确做法是用 :checked 伪类精准定位：
const selected = document.querySelector('input[name="status"]:checked');
const statusValue = selected ? selected.value : null;
注意点：
-
querySelector没匹配到时返回null，必须判空，否则.value报错 - 别用
getElementsByName再遍历——代码长、易漏判、性能差 - 如果用 jQuery：
$('input[name="status"]:checked').val()等效，但原生更轻量
提交后后端拿到的是 value 字符串，不是 on / true / 标签文本
无论界面上显示“男”“女”还是“启用”“禁用”，后端收到的永远是你写的 value 属性值。比如：<input type="radio" name="active" value="1">启用 被选中，后端收到的就是 active=1，不是 active=true，也不是 active=启用。
容易踩的坑：
- 前后端约定 value 值类型不一致：前端写
value="yes"，后端却按布尔解析 - value 含空格或特殊字符（如
value="pay with card"），没做 URL 编码或服务端过滤，导致解析失败 - 用中文当 value（如
value="男"），在某些框架或数据库编码下可能出乱码
推荐做法：value 用简短、无空格、ASCII 字符，比如 active、inactive、light、dark。
checked 却依赖 required 拦截」和「value 值与后端解析逻辑脱节」这两处。前者让表单看似有校验，实则形同虚设；后者让前后端反复对字段含义扯皮。 
