多选框需规范name命名（带[]后缀）、正确处理全选逻辑（用prop或checked属性）、重置样式（appearance:none）及联动批量操作（css+js协同）。
多选框不是加个 type="checkbox" 就能用好——name 命名、后端接收方式、全选逻辑、样式重置，四个地方错一个，提交就丢数据或交互失效。
name 属性必须带 [] 后缀才能传数组
浏览器默认把同名 input[type="checkbox"] 当作独立字段处理。如果写成 name="hobby"，PHP 的 $_POST['hobby'] 只会拿到最后一个勾选的值；Node.js 的 req.body.hobby 也大概率是字符串或 undefined。
正确写法是强制声明为数组：name="hobby[]"。这样后端收到的就是一个数组（如 ["reading", "gaming"]），而不是单个字符串。
- HTML 中多个 checkbox 共享同一个
name="xxx[]"，value 各不相同 - PHP 自动解析为
$_POST['xxx']数组；Express 需配合body-parser的extended: true选项 - 不要用
name="xxx[0]"、name="xxx[1]"这种手动索引写法——既冗余又容易漏序
全选/反选不能只靠 attr("checked")（jQuery 旧写法已失效）
现代 jQuery（3.0+）和原生 DOM 对 checked 属性的处理逻辑变了：attr("checked", true) 只设置初始属性，不触发实际勾选状态；prop("checked", true) 才真正控制当前状态。
更稳妥的做法是直接操作 checked 属性：
document.querySelectorAll('.c_n_manage_tablecon input[type="checkbox"]').forEach(cb => {
cb.checked = event.target.checked;
});
- 避免混用
attr()和prop()；老项目升级 jQuery 时最容易在这里翻车 - 全选按钮本身也要同步更新状态：点击后它自己得跟着变
checked，否则视觉与逻辑不一致 - 注意事件委托绑定位置——如果 checkbox 是动态插入的，监听要挂在父容器上，且用
change而非click
样式重置必须先清 appearance 再自定义
浏览器对 input[type="checkbox"] 的默认渲染差异极大（尤其 Safari 和 Windows Edge），直接加 border 或 background 基本无效。
第一步永远是：
input[type="checkbox"] {
appearance: none;
/* 然后再写 width/height/background 等 */
}
-
appearance: none是跨浏览器重置的前提，Chrome/Firefox/Safari 都支持，IE 不支持但 IE 已淘汰 - 用
::before或::after伪元素画勾选图标，比用图片或字体图标更轻量、更可控 - 别忘了加
cursor: pointer，否则用户可能意识不到这是可点击区域
批量操作按钮状态要依赖 :checked 伪类实时判断
“已选择 0 个”、“批量下架启用”这类反馈，不能靠 JS 计数后手动开关 disabled 属性来回切换——DOM 更新延迟、异步操作易不同步。
更稳的方式是 CSS + JS 协同：
.c_n_manage_dis:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* JS 只负责 toggle disabled 属性，样式由 CSS 控制 */
- 每次 checkbox 状态变化后，用
document.querySelectorAll(':checked').length获取当前数量，再决定是否button.disabled = false - 不要在循环里反复调用
$(':checkbox:checked')—— jQuery 选择器开销大，原生querySelectorAll更快 - 移动端要注意 touch 事件穿透问题：label 包裹 checkbox 时，确保点击区域足够大（至少 44×44px）
真正麻烦的从来不是怎么让 checkbox 显示出来，而是确保它勾选的状态能准确传到后端、能被 JS 正确读取、能和 UI 按钮联动、还能在各种设备上保持一致行为——这四点串起来，才是生产环境里不踩坑的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
