html多选（）仅提供选择功能，不直接支持批量操作，需js处理选中数据；checkbox组合更灵活可控，配合全选逻辑和正确后端接收方式才能实现可靠批量操作。
HTML 多选本身不是批量操作，但它是最常用、最轻量的批量操作触发入口——关键看你后续怎么处理选中的数据。
多选控件（<select multiple></select>）只负责“选”，不负责“做”
很多人以为加个 multiple 属性就等于实现了批量删除/导出/启用，其实它只解决了一件事：让用户能按住 Ctrl 或 Shift 一次性勾选多个 <option></option>。选完之后的 value 数组（select.selectedOptions）还是得靠 JS 拿到、解析、发请求。
-
<select multiple></select>在移动端体验差，长按、滚动、多选手势不统一，iOS Safari 甚至默认弹原生选择器 - 它的 value 只能是字符串，无法直接绑定对象或 ID+状态混合数据
- 服务端接收时，需明确声明支持数组（如后端接口要求
ids[]=1&ids[]=2或 JSON body），否则可能只拿到最后一个值
checkbox 组合 + JS 批量收集才是更可控的做法
相比 <select multiple></select>，用一组独立的 <input type="checkbox"> 配合 data 属性，灵活性高得多：
- 每个 checkbox 可绑定完整上下文：
<input type="checkbox" value="123" data-status="draft" data-type="article"> - JS 收集方便：
document.querySelectorAll('input[type="checkbox"]:checked')→ 遍历取.value或.dataset - 可随时动态增删行，不影响选择状态；而
<select></select>重渲染会清空已选项 - 配合表格使用时，还能实现“全选/反选”、“按列筛选后批量”等进阶逻辑
批量操作失败的常见原因：前端选了，后端没接住
选中 5 条记录，点击「批量下架」却只下架了 1 条？大概率卡在传输或后端解析环节：
- 前端用
fetch发 GET 请求传数组：?ids=1,2,3—— 但后端框架（如 Express、Django）默认不自动拆分逗号字符串，需手动.split(',') - 用 POST 发表单（
application/x-www-form-urlencoded）：必须确保每个 checkbox 的name后带[]，例如name="ids[]"，否则 PHP/Node.js 等只收最后一个 - 用 JSON POST：前端要
JSON.stringify({ ids: [1,2,3] })，且设Content-Type: application/json；后端需正确解析 body，不能当成 formdata 处理
一个最小可用示例（含全选逻辑）
真正容易被忽略的是：全选状态与实际勾选项的同步时机（比如搜索过滤后，全选框应自动变为“半选”或“未选”，而不是继续假意“全选”）——这需要监听 checkbox 变化并实时计算，不是加个事件就能一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
