单选框互斥和复选框多选的关键在于name属性统一、value唯一、label正确绑定；name不一致会导致单选失效，复选框同name便于后端聚合，隐藏控件需用opacity:0而非display:none。
单选框和复选框能正常互斥或允许多选，关键不是写了 或 就完事，而是 name 属性是否写对、value 是否唯一、label 是否正确绑定——错一个，表单就收不到值，或者后端解析出错。
单选框必须同 name 才能互斥
浏览器只靠 name 判断哪几个是“一组”，跟 id、文字内容、位置都无关。同一组单选框如果 name 值不一致（比如大小写不同、多空格、拼错），就会变成各自独立的控件，用户点两个都能选上。
-
name必须完全相同，推荐全小写+下划线，例如name="user_role" - 每个
的value必须不同，服务器收到的就是这个值，不是 label 文字 - 默认选中用
checked，但只能加在一个上；加多个时，浏览器只认第一个 - 务必配
，用for属性或直接包裹，否则移动端点击区域太小，且屏幕阅读器无法识别
复选框同 name 是为了后端批量接收
复选框没有互斥逻辑，name 相同只是方便后端按字段名聚合多个值。它不像单选框那样靠 name 强制约束行为，而是靠提交机制：只有勾选的才会发 value，没勾的压根不进请求参数。
- 不要给多个复选框设相同
id，会导致绑定失效 - 若想默认全选，每个都加
checked；若想默认都不选，一个都不加 - 后端框架对同名复选框的解析差异很大：
name="hobby[]"在 PHP 里自动转数组，Node.js 的body-parser默认只取最后一个值，需额外配置或换qs库 - 如果后端需要“未勾选也传 false”，HTML 本身做不到，得用隐藏字段 + JS 补充，或改用开关式组件
样式隐藏不能用 display: none
直接加 display: none 或 visibility: hidden 会让复选框/单选框从可访问性树中消失，屏幕阅读器读不到，键盘 Tab 也无法聚焦——这不是“隐藏样式”，是“删功能”。
- 正确做法是用
position: absolute; opacity: 0;把原生控件视觉隐藏但保留语义和交互能力 - 用
包裹控件和文字，比单独用for更可靠，尤其在嵌套结构或动态渲染时 - 移动端点击体验差？给
加padding或min-height，别去调的尺寸 - 禁用状态统一用
disabled属性，别只加pointer-events: none——后者不阻止表单提交时发值
后端收不到值？先查这三处
90% 的“提交没反应”问题出在前端命名和结构上，而不是后端代码。调试时优先确认：
- 浏览器开发者工具 Network → Headers → Form Data 里有没有对应字段名，值是否符合预期
- 所有同组单选框的
name是否真的一致（复制粘贴比肉眼判断更准） - 复选框是否一个都没勾？此时该字段根本不会出现在 Form Data 里，后端拿到的是 undefined 或空，不是空数组
name 命名一旦定下来，前后端就得对齐；改一个字符，可能整组值就丢进黑洞里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
