Bootstrap复选框按钮组怎么实现单选效果-Bootstrap教程-PHP中文网

用 btn-group + data-toggle="buttons" 实现单选需用 type="radio"（非 checkbox）且同 name，外层 label 包裹；Bootstrap 4/5 已废弃该属性，须手动用 CSS/JS 控制 active 状态并设初始 checked。

bootstrap复选框按钮组怎么实现单选效果

用 `btn-group` + `data-toggle="buttons"` 搞定单选，但得关掉默认多选逻辑

Bootstrap 的按钮组（.btn-group）本身不区分单选/多选，它只是样式容器；真正控制行为的是 data-toggle="buttons" 这个 JS 插件。默认它把每个 .btn 当成独立复选框，所以点击多个会同时高亮 —— 这不是 bug，是设计如此。

要实现「视觉像按钮组、行为像单选」，核心是：让 JS 把一组按钮当成一个 radio 组来处理，而不是多个 checkbox。

必须给每个按钮内层加（不是 checkbox），且所有 input 共享同一个 name
data-toggle="buttons" 会自动监听这个 name 下的 radio 切换，并同步更新按钮的 active 类
别漏掉包裹 input，否则点击无响应

`input type="radio"` 是硬性要求，用 `checkbox` 永远做不到真单选

很多人试过把 type="checkbox" 放进按钮组，再手动写 JS 取消其他选项 —— 这样能“看起来”单选，但会出问题：

键盘操作（Tab + Space）不遵循标准 radio 行为，无障碍支持差
表单提交时，checkbox 不会自动互斥，后端可能收到多个同名值
Bootstrap 的 data-toggle="buttons" 对 checkbox 不做单选管理，它只负责 toggle active 类，不干预选中状态逻辑

正确写法示例：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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; }