Bootstrap 5 已移除 data-bs-toggle="buttons" 支持，按钮组复选框需手动用 JS 同步 checkbox 状态与 label.active 类，或改用 form-check + 伪元素自定义样式。
Bootstrap 5 本身不提供原生的「按钮组复选框」（CheckboxButton）组件，所谓“按钮组复选框”其实是用 btn-group + data-bs-toggle="buttons" 模拟出来的交互效果——但它在 Bootstrap 5 中已被**正式移除**，不再受官方 JS 支持。
为什么 data-toggle="buttons" 在 Bootstrap 5 里失效了
这个属性是 Bootstrap 4 的遗留写法，Bootstrap 5 已彻底删除 button.js 插件中对复选框/单选按钮的切换逻辑。如果你照搬旧文档加了 data-bs-toggle="buttons"，会发现：
- 点击无状态切换（
.active不自动添加/移除） -
input[type="checkbox"]的真实值不会同步影响按钮外观 - 控制台无报错，但 JS 行为静默失效
根本原因是：Bootstrap 5 把表单控件（checkbox/radio）和按钮（button）的语义与实现做了严格分离——前者归 form-check 管理，后者归 btn 系列管理，不再混搭。
想实现按钮样式的多选效果，得手动补逻辑
你不能只靠 class 和 data 属性，必须用 JS 显式绑定状态。核心思路是：监听 checkbox 变化 → 同步 toggle 按钮的 .active 类 → 保持可访问性（不隐藏 input）。
- 确保每个
input[type="checkbox"]都有唯一id，且对应label[for] - 把按钮样式加在
label上（不是input），例如：class="btn btn-outline-primary" - 用
input.addEventListener('change', ...)更新label.classList.toggle('active', this.checked) - 别给
input加display: none或opacity: 0——否则屏幕阅读器无法识别
示例结构：
<div class="btn-group" role="group"> <input type="checkbox" id="opt1" name="options" value="1"> <label class="btn btn-outline-secondary" for="opt1">选项一</label> <input type="checkbox" id="opt2" name="options" value="2"> <label class="btn btn-outline-secondary" for="opt2">选项二</label> </div>
用 CSS 伪元素做真·自定义 checkbox 按钮更稳妥
如果追求完全可控、无需 JS、兼容 SSR 的方案，推荐放弃「按钮组」外壳，改用 Bootstrap 的 form-check 基础结构 + 自定义伪元素。关键点：
- 保留
input.form-check-input（不可见但可访问） - 用
label.form-check-label::before绘制按钮状背景 - 用
input:checked + label::after绘制勾选图标或填充色 - 所有尺寸、圆角、过渡都走 CSS，不依赖 JS 切换类
这样既符合 Bootstrap 5 的设计哲学，又避免了 btn-group 与表单控件语义冲突的问题——而且移动端点击热区更大，体验反而更好。
最容易被忽略的是：很多人试图直接修改 .form-check-input 的 border 或 background，但这个元素在 Bootstrap 5 里默认是 opacity: 0 + position: absolute，它只是个占位触发器，真正负责显示的是 label 的伪元素。调样式前，先看 computed styles 里它是不是已经不可见了。
