html原生select不支持全选或反选，必须用javascript实现；反选需遍历option并翻转selected属性，推荐queryselectorall获取选项、跳过disabled项，且全选与反选逻辑应解耦设计。
不能。HTML 本身没有“全选”或“反选”的语义能力，select 元素的 multiple 属性只控制是否允许多选，不提供任何选中状态批量操作逻辑——全选和反选必须由 JavaScript 实现，且反选行为是否“改善”，完全取决于你如何定义和实现它。
为什么原生 select 无法支持反选
浏览器对 <select multiple></select> 的 DOM 操作是被动的：你可以用 JS 设置 option.selected = true，但没有任何 API 能直接“把当前没选的全选上、已选的全取消”。所谓“反选”，本质是遍历所有 option 并翻转其 selected 属性，这一步必须手动编码。
-
select元素没有invertSelection()或类似方法 -
select.selectedIndex只返回第一个选中项索引（单选模式下），多选时不可靠 -
select.selectedOptions是只读集合，不能直接赋值
querySelectorAll + 循环翻转是最稳的反选写法
不要依赖 select.options 的 length 做索引遍历（IE 兼容性差），优先用现代 DOM 方法获取可枚举列表，再逐个设置 selected：
const select = document.querySelector('select[multiple]');
const options = select.querySelectorAll('option');
options.forEach(opt => opt.selected = !opt.selected);
- 用
querySelectorAll避开 IE 对HTMLCollection动态性的坑 - 务必用
!opt.selected而非硬设true/false，否则会破坏用户原本的选中意图 - 如果选项含
disabled，建议跳过：if (!opt.disabled) opt.selected = !opt.selected
全选按钮和反选按钮必须解耦设计
很多人把“全选”和“反选”绑在同一个按钮上（比如点击切换），这反而让逻辑变脆。真实场景中，用户需要明确区分两种意图：
- 全选按钮应始终执行
options.forEach(opt => opt.selected = true) - 反选按钮应始终执行
options.forEach(opt => { if (!opt.disabled) opt.selected = !opt.selected }) - 如果用一个按钮切换状态，UI 上必须同步更新文案（如“全选 → 反选”），否则用户无法预判下一次点击效果
- 禁用状态的
option是否参与反选，要按业务定——多数后台筛选场景应跳过，避免误激活无效项
反选真正的复杂点不在代码行数，而在于“哪些 option 该被纳入反选范围”——disabled、hidden、动态加载未渲染的选项、甚至服务端校验后标记为不可选的项，都可能让看似简单的 !opt.selected 出现意料外的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
