用 btn-group + data-toggle="buttons" 实现单选需用 type="radio"（非 checkbox）且同 name，外层 label 包裹；Bootstrap 4/5 已废弃该属性，须手动用 CSS/JS 控制 active 状态并设初始 checked。
用 btn-group + data-toggle="buttons" 搞定单选，但得关掉默认多选逻辑
Bootstrap 的按钮组（.btn-group）本身不区分单选/多选，它只是样式容器；真正控制行为的是 data-toggle="buttons" 这个 JS 插件。默认它把每个 .btn 当成独立复选框，所以点击多个会同时高亮 —— 这不是 bug，是设计如此。
要实现「视觉像按钮组、行为像单选」，核心是：让 JS 把一组按钮当成一个 radio 组来处理，而不是多个 checkbox。
- 必须给每个按钮内层加
<input type="radio">（不是checkbox），且所有input共享同一个name -
data-toggle="buttons"会自动监听这个name下的 radio 切换，并同步更新按钮的active类 - 别漏掉
<label class="btn"></label>包裹input，否则点击无响应
input type="radio" 是硬性要求，用 checkbox 永远做不到真单选
很多人试过把 type="checkbox" 放进按钮组，再手动写 JS 取消其他选项 —— 这样能“看起来”单选，但会出问题：
- 键盘操作（Tab + Space）不遵循标准 radio 行为，无障碍支持差
- 表单提交时，
checkbox不会自动互斥，后端可能收到多个同名值 - Bootstrap 的
data-toggle="buttons"对checkbox不做单选管理，它只负责 toggleactive类，不干预选中状态逻辑
正确写法示例：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="1"> 选项一
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="2"> 选项二
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="3"> 选项三
</label>
</div>
Bootstrap 4/5 中 data-toggle 被移除，改用纯 CSS 或 JS 手动控制
如果你用的是 Bootstrap 4 或更新版本，data-toggle="buttons" 已被废弃，官方不再提供该 JS 功能。此时不能依赖自动同步，得自己补逻辑：
- CSS 层面：确保
input[type="radio"]隐藏（position: absolute; opacity: 0），用label的:checked伪类控制按钮样式 - JS 层面：监听
change事件，手动给当前label加active类，移除兄弟节点的active - 注意：Bootstrap 5 默认按钮组没有
active样式关联，得自己加 CSS 规则，比如.btn-group .btn.active { z-index: 1; }
容易忽略的细节：初始状态没设 checked，会导致第一次点击不触发 active
如果所有 input 都没加 checked 属性，页面加载后按钮组全是未激活态。这时点第一个按钮，Bootstrap 的 JS（或你写的逻辑）可能不会自动加 active —— 因为它只响应 change 事件，而初始无选中就没事件可绑。
- 务必在 HTML 中显式设置一个
input带checked，例如：<input type="radio" name="options" value="1" checked> - 如果初始状态需由 JS 控制，请在 DOM ready 后手动触发一次
click()或直接操作classList - 服务端渲染时，也要确保生成的 HTML 包含正确的
checked属性，否则首屏交互会断层
这种隐式依赖很容易被当成“功能不生效”，其实只是状态没对齐。
