能，单选按钮和复选框可共存于同一表单，需通过不同 name 值隔离语义组、独立事件监听、分别绑定 label，并注意提交数据结构差异与联动逻辑处理。
单选按钮和复选框能放在同一个表单里吗
能，而且很常见——比如“订单类型”用单选（radio），“附加服务”用复选（checkbox）。但混排不是简单堆砌，关键在于语义分组和交互隔离。
浏览器只对 name 相同的 input[type="radio"] 做互斥控制；checkbox 则完全独立。所以只要 name 不冲突，混放不会互相干扰。
- 单选组必须共用唯一
name（如name="delivery"），复选组另起一个（如name="addon"） - 避免把单选和复选写进同一个
fieldset且没加legend—— 屏幕阅读器会把它们读成一组，破坏逻辑 - 如果某项既可单选又可多选（比如“支付方式”中“组合支付”开启后允许多选），别强行混在一组里，应该用 JS 动态切换控件类型或显式拆分成两个区域
怎么防止用户误点导致单选状态被复选框“覆盖”
这不是浏览器行为，而是 DOM 事件监听写法不当造成的假象：比如给整个表单绑了 click，又没判断 e.target.type，结果点击复选框时也触发了单选重置逻辑。
真正可靠的写法是按控件类型分离监听：
立即学习“前端免费学习笔记（深入）”；
- 单选组用
change事件监听，只处理e.target.type === 'radio' - 复选组也用
change，但过滤e.target.type === 'checkbox' - 不要在父容器上用
click统一处理所有输入，否则键盘空格、辅助工具触发的change会被漏掉 - 若需统一响应（比如“任一选项变更就启用提交按钮”），在每个 change 回调里调用同一函数，而不是合并事件源
label 标签怎么正确包裹混排的 radio 和 checkbox
label 必须一对一绑定，不能一个 label 包两个不同 type 的控件。常见错误是写成：<label><input type="radio"><input type="checkbox">混搭选项</label> —— 这会导致点击文字时只有第一个控件响应，第二个无效。
正确做法是每个控件配独立 label：
<label> <input type="radio" name="mode" value="fast"> 快速模式 </label> <label> <input type="checkbox" name="notify" value="email"> 邮件提醒 </label>
- 不依赖
for/id也能工作，但加上更稳妥（尤其动态渲染时） - 如果视觉上想让文字对齐，用 CSS 控制
label的display: flex或vertical-align，别动input自身的宽高 - 移动端点击热区小？给
label设min-width: 44px（符合触控最小尺寸规范）
提交时如何区分 radio 和 checkbox 的数据结构
后端收到的数据天然不同：radio 同名只提交一个值，checkbox 同名提交多个值（或不提交）。但容易踩坑的是 disabled 状态和空值处理。
- 如果某个
radio被设disabled，它不会出现在提交数据中 —— 所以默认选中项不能靠 JS 设置disabled来隐藏，得用hidden字段或服务端兜底 -
checkbox没勾选时完全不提交，后端不能假设“没收到addon[]就等于空数组”，要主动初始化为[] - 避免给
radio和checkbox用相同name（比如都叫options）—— PHP 会覆盖，Node.js 的body-parser可能解析失败或报错 - 调试时用
console.log(new FormData(form))查看实际提交内容，比猜更准
data-dependent-on 就加，该在 change 里手动调 checkValidity() 就调。 
