Bootstrap5 复选框与单选框

Bootstrap 5 复选框与单选框

掌握Bootstrap 5的选择控件，创建现代化、交互式的复选框和单选框。

开始学习 交互演示
选择控件介绍 复选框 基本复选框 复选框布局 复选框状态 单选框 基本单选框 单选框布局 开关控件 按钮样式 交互式演示

复选框与单选框介绍

复选框和单选框是Web表单中常用的选择控件，用于收集用户的输入信息。

Bootstrap 5 提供了丰富的样式和功能来美化和增强这些控件：

  • 统一的视觉设计
  • 灵活的布局选项
  • 自定义样式和颜色
  • 开关样式控件
  • 按钮样式选择
  • 响应式设计

使用Bootstrap 5的选择控件，可以大大提升用户体验和界面美观度。

选择控件优势
美观一致

统一的视觉设计

灵活布局

多种布局选项

交互丰富

多种交互样式

响应式

适配各种设备

基本结构

Bootstrap 5 复选框和单选框的基本结构包含容器、输入控件和标签。

<!-- 复选框 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="basicCheckbox">
  <label class="form-check-label" for="basicCheckbox">
    默认复选框
  </label>
</div>

<!-- 单选框 -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="basicRadio" id="basicRadio1">
  <label class="form-check-label" for="basicRadio1">
    默认单选框
  </label>
</div>

复选框

复选框允许用户从多个选项中选择一个或多个选项。

基本复选框

使用 .form-check 和 .form-check-input 类创建基本复选框：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    默认复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="defaultCheck2" checked>
  <label class="form-check-label" for="defaultCheck2">
    选中复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="defaultCheck3" disabled>
无标签复选框

可以创建没有可见标签的复选框：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="noLabelCheckbox">
  <label class="form-check-label" for="noLabelCheckbox"></label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="noLabelCheckbox2" checked>
  <label class="form-check-label" for="noLabelCheckbox2"></label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="noLabelCheckbox3" disabled>
  <label class="form-check-label" for="noLabelCheckbox3"></label>
</div>

复选框布局

Bootstrap 5 提供了多种复选框布局选项。

垂直布局

默认情况下，复选框是垂直堆叠的：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="verticalCheck1">
  <label class="form-check-label" for="verticalCheck1">
    第一个复选框
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="verticalCheck2">
  <label class="form-check-label" for="verticalCheck2">
    第二个复选框
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="verticalCheck3">
  <label class="form-check-label" for="verticalCheck3">
    第三个复选框
  </label>
</div>
水平布局

使用 .form-check-inline 类创建水平排列的复选框：

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">选项 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">选项 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">选项 3 (禁用)</label>
</div>
网格布局

使用Bootstrap网格系统创建复杂的复选框布局：

<div class="row">
  <div class="col-md-4">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck1">
      <label class="form-check-label" for="gridCheck1">
        复选框 1
      </label>
    </div>
    <!-- 更多复选框 -->
  </div>
  <div class="col-md-4">
    <!-- 更多复选框 -->
  </div>
  <div class="col-md-4">
    <!-- 更多复选框 -->
  </div>
</div>

复选框状态

Bootstrap 5 提供了多种复选框状态选项。

不确定状态

使用 indeterminate 属性创建不确定状态的复选框：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="indeterminateCheckbox" indeterminate>
  <label class="form-check-label" for="indeterminateCheckbox">
    不确定状态复选框
  </label>
</div>
// 通过JavaScript设置不确定状态
document.getElementById('indeterminateCheckbox').indeterminate = true;
验证状态

使用验证类为复选框添加验证状态：

看起来不错!
请选择此复选框以继续。 
<div class="form-check">
  <input class="form-check-input is-valid" type="checkbox" id="validCheckbox">
  <label class="form-check-label" for="validCheckbox">
    有效状态复选框
  </label>
  <div class="valid-feedback">
    看起来不错!
  </div>
</div>

<div class="form-check">
  <input class="form-check-input is-invalid" type="checkbox" id="invalidCheckbox">
  <label class="form-check-label" for="invalidCheckbox">
    无效状态复选框
  </label>
  <div class="invalid-feedback">
    请选择此复选框以继续。
  </div>
</div>

单选框

单选框允许用户从多个选项中选择一个选项。

基本单选框

使用 .form-check 和 .form-check-input 类创建基本单选框：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    默认单选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    第二个默认单选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    禁用单选框
  </label>
</div>
无标签单选框

可以创建没有可见标签的单选框：

<div class="form-check">
  <input class="form-check-input" type="radio" name="noLabelRadios" id="noLabelRadio1">
  <label class="form-check-label" for="noLabelRadio1"></label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="noLabelRadios" id="noLabelRadio2" checked>
  <label class="form-check-label" for="noLabelRadio2"></label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="noLabelRadios" id="noLabelRadio3" disabled>
  <label class="form-check-label" for="noLabelRadio3"></label>
</div>

单选框布局

Bootstrap 5 提供了多种单选框布局选项。

垂直布局

默认情况下，单选框是垂直堆叠的：

<div class="form-check">
  <input class="form-check-input" type="radio" name="verticalRadios" id="verticalRadio1" value="option1" checked>
  <label class="form-check-label" for="verticalRadio1">
    第一个单选框
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="verticalRadios" id="verticalRadio2" value="option2">
  <label class="form-check-label" for="verticalRadio2">
    第二个单选框
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="verticalRadios" id="verticalRadio3" value="option3">
  <label class="form-check-label" for="verticalRadio3">
    第三个单选框
  </label>
</div>
水平布局

使用 .form-check-inline 类创建水平排列的单选框：

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">选项 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">选项 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">选项 3 (禁用)</label>
</div>

开关控件

Bootstrap 5 提供了开关样式的复选框，用于表示开启/关闭状态。

基本开关

使用 .form-switch 类创建开关样式的复选框：

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">默认开关</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">选中开关</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">禁用开关</label>
</div>
自定义开关

可以自定义开关的大小和样式：

<!-- 大号开关 -->
<div class="form-check form-switch custom-switch-lg">
  <input class="form-check-input" type="checkbox" id="customSwitch1">
  <label class="form-check-label" for="customSwitch1">大号开关</label>
</div>

<!-- 自定义颜色开关 -->
<div class="form-check form-switch">
  <input class="form-check-input form-check-custom" type="checkbox" id="customSwitch3">
  <label class="form-check-label" for="customSwitch3">自定义颜色开关</label>
</div>
.custom-switch-lg .form-check-input {
  width: 3rem;
  height: 1.5rem;
}

.form-check-custom .form-check-input:checked {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

按钮样式

Bootstrap 5 允许您将复选框和单选框样式化为按钮。

复选框按钮

使用按钮样式创建复选框：

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
</div>
单选框按钮

使用按钮样式创建单选框：

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">单选框 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">单选框 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">单选框 3</label>
</div>
垂直按钮组

创建垂直排列的按钮样式选择控件：

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="vbtn-radio1">单选框 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="vbtn-radio2">单选框 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="vbtn-radio3">单选框 3</label>
</div>

交互式演示

使用下面的控件实时调整选择控件的属性，观察效果变化。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="interactiveCheckbox">
  <label class="form-check-label" for="interactiveCheckbox">
    示例复选框
  </label>
</div>

快速参考

复选框类

基本类
.form-check
.form-check-input
.form-check-label
布局类
.form-check-inline
开关类
.form-switch
按钮样式
.btn-check
.btn-group

单选框类

基本类
.form-check
.form-check-input
.form-check-label
布局类
.form-check-inline
按钮样式
.btn-check
.btn-group
.btn-group-vertical

状态属性

选中状态
checked
禁用状态
disabled
不确定状态
indeterminate
验证状态
.is-valid
.is-invalid

掌握选择控件后，探索更多Bootstrap组件

Bootstrap 5 提供了丰富的组件库，可以帮助您构建功能完善的现代网站。

学习表单组件 查看按钮组件
上一章: 表单 下一章: 选择区间