复选框跨表单提交时name不一致会导致后端收不到数组；必须同名且在同一form内提交，或用JS统一收集；后端接收需匹配框架要求（如PHP用hobby[]），未勾选项需前端补隐藏字段或JS处理。
复选框跨表单提交时 name 不一致会导致后端收不到数组
浏览器只按 name 聚合同名复选框的值，不同 form 标签里的复选框，只要 name 相同，提交时就会合并成一个字段。但前提是：它们必须在同一个 submit 触发的请求中被提交——也就是说，不能靠两个独立表单分别提交，否则后端会收到两组独立请求，压根没法“合并”。
常见错误现象：form1 里有 ，form2 里也有同名复选框，但用户点 form1 的提交按钮，后端只收到 tag=a；点 form2 提交，又只收到另一批。这不是“没合并”，是根本没进同一请求。
- 真正可行的做法：把所有要提交的复选框放在**同一个
内**，哪怕视觉上分区块，也用 CSS 布局隔离，不要拆成多个form - 如果业务逻辑强制分多步/多区域（比如 Wizard 表单），就别用原生
submit，改用 JS 收集所有document.querySelectorAll('input[type="checkbox"]:checked')的value，再统一 POST - 禁用
form的默认提交行为（event.preventDefault()），否则浏览器会只提交当前form的控件
后端解析不到复选框数组？检查 name 是否带方括号
PHP、Laravel、Django 等框架默认把同名复选框识别为数组，但前提是 name 写法得匹配框架预期。例如 PHP 期望 name="hobby[]"，Node.js 的 body-parser 默认只取最后一个值，除非配置 extended: true 或换用 qs 库。
错误写法：name="hobby" → 后端只拿到字符串或单个值；正确写法取决于后端：
- PHP / Laravel：用
name="hobby[]"，后端直接收$_POST['hobby']为数组 - Node.js + Express：默认
body-parser不支持数组，需app.use(bodyParser.urlencoded({ extended: true }))，或安装qs并传入parameterLimit: 10000 - Django：
name="hobby"即可，用request.POST.getlist('hobby')取全部值 - Spring Boot：
name="hobby"，用@RequestParam Listhobby
如何让未勾选的复选框也传 false 或 null？HTML 本身做不到
input[type="checkbox"] 的机制是：**不勾选 = 不发送该字段**。这是规范行为，不是 bug。所以如果后端需要“全量字段”，比如 { "email": true, "sms": false, "push": true }，光靠 HTML 无法实现。
必须前端补位：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 方案一（推荐）：对每个复选框配一个隐藏字段，如
。注意隐藏字段要在 checkbox 前面，否则 checkbox 的值会覆盖它 - 方案二：用 JS 在提交前遍历所有复选框，对未勾选的项手动 push 到数据对象里，再用
fetch提交 - 方案三：改用开关式组件（如
配value="true"/"false"），但语义上不如 checkbox 直观
别信“加 required 就能强制传值”——required 对 checkbox 只校验“勾选”，不解决“未勾选不传”的问题。
全选按钮控制跨区域复选框，name 分组必须严格一致
全选按钮本身不参与提交，它只是控制器。它要操作的目标复选框，必须共享**完全相同的 name 值**（包括大小写、空格、下划线），否则 document.querySelectorAll('input[name="item"]') 查不到。
容易踩的坑：
- 误给全选框也设
name="item"→ 它会被当成数据项，提交时多传一个无意义的item=on - 目标复选框有的写
name="item"，有的写name="Item"或name="item "→ 查询结果为空，全选失效 - 用 class 或 data-group 匹配 → 违背表单语义，且和后端接收逻辑脱节，纯属自找麻烦
复杂点在于：当复选框数量大（>500 个）或动态渲染频繁时，querySelectorAll 每次都重查 DOM 成本高，应缓存节点列表，或改用事件委托（但注意 checkbox 的 change 不冒泡，得监听 click 并判断 target.type === 'checkbox'）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
