Bootstrap 按钮组(Button Group)单选效果实现-Bootstrap教程-PHP中文网

btn-group 默认不支持单选，因其仅为样式容器，无内置交互逻辑；需通过原生 radio+label 实现真单选，或用 js 手动管理 active 类并兼顾可访问性。

bootstrap 按钮组(button group)单选效果实现

为什么 `btn-group` 默认不支持单选？

Bootstrap 的 .btn-group 只是样式容器，它不绑定任何交互逻辑——点击按钮不会自动取消其他按钮的 active 状态，也不会同步更新 checked 或 value。你看到的“单选效果”必须手动控制 DOM 状态或借助表单控件（如 <input type="radio">）来实现。

用原生 radio + Bootstrap 样式实现真单选

这是最可靠、无障碍友好、且无需 JS 的方案：把 <input type="radio"> 隐藏，用 <label></label> 包裹按钮，并复用 Bootstrap 的 btn 类。浏览器原生 radio 机制会保证同一 name 下仅一个被选中。

关键点：

<input> 必须有相同的 name 属性（如 name="options"），否则无法互斥
<label></label> 的 for 属性需匹配 input 的 id，或直接包裹 input 和按钮文本
隐藏 input 推荐用 visually-hidden（Bootstrap 5+）或 position: absolute; clip: rect(0 0 0 0);，避免 display: none 导致表单提交丢失值

<div class="btn-group" role="group">
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" value="left" class="visually-hidden">
    Left
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" value="middle" class="visually-hidden">
    Middle
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" value="right" class="visually-hidden">
    Right
  </label>
</div>

用 JavaScript 手动管理 `active` 类（无表单需求时）

如果只是 UI 层切换状态、不涉及表单提交或后端接收，可以监听点击，手动移除其他兄弟节点的 active，再给当前加。但要注意：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

必须用事件委托或为每个按钮单独绑定，避免重复绑定
不能只靠 click，要兼容键盘操作（如空格/回车触发）需监听 keydown
若按钮含 <a></a> 或 <button></button>，需阻止默认跳转或提交行为
Bootstrap 5+ 的 data-bs-toggle="button" 仅对单个按钮生效，不支持组内互斥

简单示例（假设按钮都是 <button></button>）：

document.querySelectorAll('.btn-group .btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
  });
});