Bootstrap 5 复选框与单选框指南
编程小白也能轻松掌握的详细知识点汇总
通俗易懂
详细全面
即学即用
基础概念
什么是复选框 (Checkbox)?
复选框允许用户从一组选项中选择多个选项。就像点菜时你可以同时选择”不要香菜”、”加辣”等多个选项。
什么是单选框 (Radio)?
单选框允许用户从一组选项中只选择一个选项。就像单选题，A、B、C、D中只能选一个。
核心区别：
复选框可以同时选择多个选项，单选框只能选择一个选项。
单选框组中所有选项的 name 属性必须相同，这样才能互斥选择。
基本使用方法
复选框基本结构
<div class="form-check">
<input class="form-check-input"
type="checkbox"
id="flexCheckDefault">
<label class="form-check-label"
for="flexCheckDefault">
默认复选框
</label>
</div>
单选框基本结构
<div class="form-check">
<input class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1">
<label class="form-check-label"
for="flexRadioDefault1">
默认单选框
</label>
</div>
重要提示：
1. for 属性值必须与 id 属性值相同，这样点击标签文字也能选择控件。
2. 单选框组中所有选项的 name 属性必须相同，才能实现单选效果。
布局选项
垂直布局（默认）
选项垂直堆叠排列，适合选项较多的情况。
水平布局
选项水平排列在一行，适合选项较少且空间充足的情况。
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" ...> <label class="form-check-label" ...>选项一</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" ...> <label class="form-check-label" ...>选项二</label> </div>
无标签文本
当只需要控件不需要可见标签时（例如在表格中），可以省略标签文本。
状态控制
禁用状态
使用 disabled 属性使控件不可用。
只读状态
使用 readonly 属性防止用户更改值（Bootstrap 5默认样式不支持，需自定义）。
不确定状态
复选框可以处于”部分选择”的不确定状态（仅视觉表现）。
自定义样式
开关样式
使用 .form-switch 类将复选框转换为开关样式。
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" ...> <label class="form-check-label" ...>开关样式</label> </div>
按钮样式
使用按钮组样式创建更醒目的选择控件。
复选框与单选框对比
| 特性 | 复选框 (Checkbox) | 单选框 (Radio) |
|---|---|---|
| 选择数量 | 可以选择多个选项 | 只能选择一个选项 |
| HTML 类型 | type="checkbox" |
type="radio" |
| 分组 | 不需要相同名称 | 同组选项需要相同 name 属性 |
| 默认选中 | 使用 checked 属性 |
使用 checked 属性 |
| 不确定状态 | 支持 | 不支持 |
| 典型应用场景 | 多选设置、标签选择 | 单选设置、性别选择 |
核心知识点总结
复选框要点
- 使用
<input type="checkbox"> - 允许选择多个选项
- 每个选项独立，无需相同名称
- 支持开关样式
.form-switch - 支持不确定状态
单选框要点
- 使用
<input type="radio"> - 一组中只能选择一个选项
- 同组单选框必须有相同的
name - 适合排他性选择
- 不支持不确定状态
通用要点
始终使用 .form-check 容器包裹控件及其标签
使用 .form-check-input 和 .form-check-label 类
正确关联 label 的 for 属性和 input 的 id