label 和 checkbox 必须显式（for/id）或隐式（input 嵌套在 label 内）绑定，否则点击无效；禁用 display: none 隐藏 checkbox，应视觉隐藏并用伪元素自定义样式；name/value 需正确设置，js 修改 checked 后需手动触发 change 事件。
label 和 checkbox 的绑定必须显式或嵌套，不能靠位置“猜”
点击图标或文字没反应？八成是 label 和 input[type="checkbox"] 没真正关联上。浏览器不会根据 DOM 顺序自动配对——哪怕它们紧挨着写，只要没 for 属性也没嵌套，就等于没绑定。
两种可靠方式：
- 显式绑定：给
input设id="hobby-music"，label写for="hobby-music" - 隐式嵌套（推荐）：直接把
input放进label里，如<label><input type="checkbox" name="hobbies">音乐</label>
别用 display: none 隐藏 checkbox——这会让屏幕阅读器跳过它，也中断键盘 Tab 焦点流。该用视觉隐藏方案：position: absolute; opacity: 0; width: 1px; height: 1px;
自定义样式得靠伪元素，不是改 input 本身
input[type="checkbox"] 几乎没法直接加边框、动画或 SVG 图标。appearance: none 在 Safari 旧版和部分 Android 浏览器里不生效，强行用会掉样式。
正确路径是：保留原生 checkbox（仅视觉隐藏），用 label::before 画外框，label::after 画对勾。关键选择器取决于结构：
- 若用
for显式绑定：input:checked + label::after控制对勾显示 - 若用嵌套结构：
input:checked + span::after（需在label内再包一层span文本）或改用input:checked ~ label::after
别忘了给伪元素设 position: absolute 和 pointer-events: none，否则可能拦截点击。
name 和 value 必须写对，否则后端收不到数据
多选框提交时只发被勾选项的 value，且所有相关项要共用同一个 name（比如 name="skills"）。常见错误：
- 漏写
value：默认值是"on"，后端根本分不清选了哪个 -
name拼错或含空格：如name="user interests"→ 提交键名变成user%20interests，后端取不到 - 后端框架没配置数组解析：Express 默认只收第一个值，得用
extended: true；PHP 接收习惯用name="hobbies[]"
调试时打开浏览器 Network → Payload，确认发送的字段名和值是否符合预期。
JS 控制 checked 状态时，change 事件不会自动触发
用 JS 设置 checkboxEl.checked = true 只改状态，不触发 change 事件。如果 UI 更新或校验逻辑依赖这个事件，就会卡住。
安全做法是手动派发：
checkboxEl.checked = true;
checkboxEl.dispatchEvent(new Event('change', { bubbles: true }));
批量操作别用 getElementsByName（返回类数组，不支持 forEach），改用 document.querySelectorAll('input[name="hobbies"]:checked') 直接取已勾选项。
最易被忽略的是焦点样式缺失：自定义 checkbox 后，很多人删掉了原生 focus outline，但没补上可访问的焦点态。用户用键盘 tab 切换到它时，必须有清晰的视觉反馈，否则违反 WCAG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
