radio和checkbox混用同name会导致行为异常，应严格分离name；视觉同组需用class组织；隐藏input须保证可访问性；服务端须独立校验exclusive与flexible字段。
radio 和 checkbox 混用时 name 冲突导致行为异常
把 type="radio" 和 type="checkbox" 放在同一组 name 下，浏览器不会报错，但行为不可控：radio 会强制互斥，checkbox 却可能被忽略 checked 状态，或提交时只传一个 value。这不是 bug，是规范使然——name 是表单字段名，类型不同就该用不同 name。
常见错误现象：
- 点 checkbox 没反应 → 实际被同名 radio 的 focus 或 change 事件干扰
- 表单提交后后端只收到一个值，哪怕 DOM 上两个都勾了
- JS 用
document.querySelectorAll('input[name="x"]')拿到混合节点，遍历时 type 判断漏写，导致逻辑错乱
正确做法是严格分离：单选用 name="preference"，多选用 name="interests"。若 UI 上必须“视觉同组”，靠 class（如 class="choice-group"）组织样式和 JS 绑定，而非 name。
用 class 控制切换逻辑：避免全局监听和重复绑定
想实现“点击 A 时取消 B、C，但 B 和 C 可共存”，不能靠给所有 input 加 change 事件再手动遍历；容易在动态渲染、重复初始化时绑多次，造成状态错乱。
立即学习“前端免费学习笔记（深入）”；
推荐结构和逻辑：
- 为需排他性的项加
class="exclusive"，为可多选的项加class="flexible" - 监听父容器（如
form或div.choice-section）的change事件，委托处理 - 在 handler 中判断
e.target.classList.contains("exclusive")，再操作同组其他.exclusive元素 - 对
.flexible不做干预，保留原生多选行为
示例关键片段：
document.querySelector('.choice-section').addEventListener('change', e => {
if (e.target.classList.contains('exclusive')) {
document.querySelectorAll('.exclusive').forEach(box => {
if (box !== e.target) box.checked = false;
});
}
});
label 包裹 + 视觉隐藏 input 的兼容性陷阱
直接对 input[type="checkbox"] 或 input[type="radio"] 设置 display: none 或 visibility: hidden，会导致键盘空格无法切换、屏幕阅读器跳过、移动端点击失效。这不是样式问题，是交互链断裂。
安全隐藏方式必须满足三个条件：
- input 仍在 DOM 流中（不能
display: none） - 视觉不可见但尺寸为 1px（用
position: absolute; clip: rect(0 0 0 0);） - label 必须包裹 input，而不是靠
for+id关联（动态渲染易断）
错误写法：<input type="checkbox" class="hidden"><label>选项</label> → 点 label 没反应
正确最小结构：<label><input type="checkbox">选项</label>，再用 CSS 隐藏 input 并绘制自定义控件。
服务端校验必须区分 exclusive 和 flexible 字段
前端用 class 控制行为，不代表后端能信任。用户可绕过 JS 直接 POST 数据，比如同时提交两个 exclusive 字段的 value，或漏掉必选的 flexible 组。
校验要点：
- 对
exclusive字段（如preference），检查是否恰好一个非空值，且值在白名单内 - 对
flexible字段（如interests[]），检查是否为数组，每个元素是否合法，长度是否在允许范围内 - 不要依赖字段名后缀（如
interests[]）自动解析为数组——PHP 默认这么做，但 Node.js/Python 需显式处理
最容易被忽略的一点：当用户未操作任何 exclusive 项时，该字段根本不会出现在 POST 数据里（浏览器不提交未选中的 radio），所以校验要先判 key 是否存在，再判值。
