Bootstrap 5 中唯一推荐的复选框容器是 form-check，已彻底移除 btn-group + data-toggle="buttons"；必须用 form-check 包裹 form-check-input 和 form-check-label，确保语义正确、可访问且样式可控。
Bootstrap 5 的 form-check 是唯一推荐的复选框容器
Bootstrap 5 已彻底移除 btn-group + data-toggle="buttons" 这套旧式按钮式复选框（它在 v4.3 就被标记为废弃，v5 直接删了）。现在必须用 form-check 配合 form-check-input 和 form-check-label 实现语义正确、可访问、样式可控的复选框按钮效果。
关键不是“怎么让它看起来像按钮”，而是“怎么让复选框具备按钮交互感又不破坏表单逻辑”。常见错误是强行给 label 加 btn 类——这会导致点击区域错位、焦点样式异常、屏幕阅读器误读。
- 始终把
input[type="checkbox"]放在label内部，或通过for属性绑定，确保点击文字也能触发选中 - 不要手动设置
input的display: none；Bootstrap 的form-check-input已内置视觉隐藏逻辑 - 若需“按钮式”外观，只对
form-check-label添加btn btn-outline-primary等类，并加px-3 py-1微调内边距
form-check-label 加 btn 类后必须处理点击反馈
直接给 form-check-label 加 btn 类，会导致原生复选框的 :checked 状态无法联动按钮的 active 样式。用户点了没视觉反馈，体验断裂。
解决方式是用少量 JS 监听 change 事件，手动切换 btn-active 类：
<div class="form-check"> <input class="form-check-input" type="checkbox" id="agree"> <label class="form-check-label btn btn-outline-secondary" for="agree">我同意</label> </div>
对应 JS（无需 jQuery）：
document.getElementById('agree').addEventListener('change', function() {
const label = this.nextElementSibling;
if (this.checked) {
label.classList.add('active');
} else {
label.classList.remove('active');
}
});
- 必须监听
change而非click，避免重复触发或状态不同步 -
active类本身不会自动生效，需确认 Bootstrap CSS 中存在.btn.active规则（默认有） - 移动端需额外处理 touch 事件吗？不用——
change在 iOS/Android 上均可靠触发
多个复选框组成按钮组时，别用 btn-group
有人试图用 btn-group 包裹多个带 btn 的 form-check-label，结果发现圆角只在首尾生效、间距不对、键盘导航跳过中间项。这是结构错误：按钮组（btn-group）只适用于真正的 button 或 a 元素，不兼容表单控件容器。
正确做法是用 btn-group 作为外层布局容器，但内部每个选项仍保持完整 form-check 结构：
<div class="btn-group">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="opt1" name="options">
<label class="form-check-label btn btn-sm btn-outline-dark px-3 py-1" for="opt1">选项一</label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="opt2" name="options">
<label class="form-check-label btn btn-sm btn-outline-dark px-3 py-1" for="opt2">选项二</label>
</div>
</div>
-
mb-0是必须的，否则form-check默认的下边距会撑开按钮组间隙 - 所有
input应共用name（如多选场景），或各自独立name（如布尔开关） - 键盘 Tab 导航会按 DOM 顺序进入每个
input，无障碍支持良好
自定义颜色和尺寸要改 form-check-input 的伪元素
如果只是给 label 换个 btn-danger，勾选状态的对勾图标还是默认蓝灰。真正需要定制的是复选框本身的视觉符号——它由 form-check-input::after 伪元素渲染。
覆盖方式示例（CSS）：
.form-check-input:checked ~ .form-check-label::after {
background-color: #dc3545;
border-color: #dc3545;
}
- 不要试图用
background-image替换对勾——Bootstrap 5 用 SVG data URL 实现，更轻量且可缩放 - 若需完全自定义图标（比如用 Font Awesome），得隐藏原生伪元素，再用
form-check-label::before插入新内容，但会增加维护成本 - 响应式尺寸调整？别动
form-check-input的宽高——它的大小由em单位锚定父级字体，改label的font-size或padding更安全
最易被忽略的是 focus 样式：当用户用键盘操作时，焦点落在 input 上，但视觉焦点环默认套在看不见的复选框上。务必检查 .form-check-input:focus 是否能清晰显示，必要时用 box-shadow 强化——否则 WCAG 2.1 AA 就不达标。
