异常教程

Bootstrap5 复选框与单选框（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，表单交互是用户与网站进行信息交换的核心渠道。无论是用户注册、产品选择还是问卷调查，复选框（Check Box）与单选框（Radio Button）都是不可或缺的表单组件。Bootstrap5 作为当前最流行的前端框架，通过简洁的 CSS 和 JavaScript 工具，为开发者提供了快速实现美观且功能完善的复选框与单选框的解决方案。本文将从基础用法到高级定制，系统性地讲解如何通过 Bootstrap5 搭建高效、优雅的复选框与单选框交互组件，帮助开发者快速掌握这一技能。

一、复选框与单选框的基础概念

在深入代码实现之前，我们需要明确这两个表单元素的核心区别：

  • 复选框（Check Box）：允许用户选择多个选项，每个选项独立存在，互不影响。例如“兴趣爱好”选项中，用户可以选择“音乐”和“运动”同时被选中。
  • 单选框（Radio Button）：同一组中只能选择一个选项，例如“性别”选项中，用户只能选择“男”或“女”中的一项。

Bootstrap5 对这两个组件进行了样式封装，使其在不同浏览器和设备上保持一致的视觉效果，同时简化了开发者的工作流程。

二、Bootstrap5 复选框与单选框的 HTML 结构

2.1 基础 HTML 实现

在 Bootstrap5 中，复选框和单选框的 HTML 结构与原生 HTML 完全兼容，但通过添加框架提供的类名，可以快速应用样式。

示例 1：复选框的 HTML 写法

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="option1" id="checkbox1">
  <label class="form-check-label" for="checkbox1">
    选项 1
  </label>
</div>

示例 2：单选框的 HTML 写法

<div class="form-check">
  <input class="form-check-input" type="radio" name="options" id="radio1" value="option1">
  <label class="form-check-label" for="radio1">
    选项 A
  </label>
</div>

关键点解析：

  • form-check 是包裹层类名，用于定义表单控件的基本间距和布局。
  • form-check-input 应用在 <input> 标签上，确保 Bootstrap 的样式生效。
  • form-check-label 需要与 <input> 的 id 属性关联，通过 for 属性实现点击文字时触发选择。

三、样式定制：让组件更美观

Bootstrap5 提供了丰富的样式类和变体，开发者可以通过组合类名实现个性化设计。

3.1 不同尺寸的复选框与单选框

通过添加 form-check-lg 或 form-check-sm 类，可以快速调整控件尺寸：

类名效果描述
form-check-lg大号控件（高度约 2.5rem）
form-check-sm小号控件（高度约 1.75rem）
 
<!-- 大号复选框示例 -->
<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox" id="checkbox-lg">
  <label class="form-check-label" for="checkbox-lg">
    大号选项
  </label>
</div>

3.2 不同颜色主题

Bootstrap5 支持通过 btn-* 类实现按钮样式的复选框和单选框，例如：

<!-- 危险色单选框 -->
<div class="form-check form-switch">
  <input class="form-check-input btn-danger" type="radio" id="radio-danger">
  <label class="form-check-label" for="radio-danger">
    危险选项
  </label>
</div>

提示：颜色类（如 btn-primary）需与 form-check-input 共同使用，否则样式可能失效。

四、交互增强：动态功能实现

4.1 开关样式（Switch）

Bootstrap5 提供了 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>

4.2 禁用状态

通过添加 disabled 属性，可将复选框或单选框设为不可选状态：

<!-- 禁用的复选框 -->
<input class="form-check-input" type="checkbox" disabled id="disabledCheckbox">
<label class="form-check-label" for="disabledCheckbox">
  不可选选项
</label>

五、表单验证与错误提示

Bootstrap5 内置了原生表单验证样式，结合 HTML5 的 required 属性，可实现直观的交互反馈：

<!-- 必填复选框 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
  <label class="form-check-label" for="invalidCheck">
    我已阅读并同意条款
  </label>
</div>

当用户未勾选复选框时，框架会自动添加 is-invalid 类，显示红色边框和错误提示。

六、实际案例：构建多功能表单

以下是一个综合案例，演示如何用 Bootstrap5 创建包含复选框、单选框和验证功能的注册表单：

<form class="container mt-5">
  <div class="mb-3">
    <label for="username" class="form-label">用户名</label>
    <input type="text" class="form-control" id="username" required>
  </div>

  <div class="mb-3">
    <label class="form-check-label">性别</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male" value="male">
      <label class="form-check-label" for="male">男</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female" value="female">
      <label class="form-check-label" for="female">女</label>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-check-label">兴趣爱好</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="music" id="music">
      <label class="form-check-label" for="music">音乐</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="sports" id="sports">
      <label class="form-check-label" for="sports">运动</label>
    </div>
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="agree" required>
    <label class="form-check-label" for="agree">
      我已阅读并同意条款
    </label>
  </div>

  <button type="submit" class="btn btn-primary">注册</button>
</form>

此案例中：

  1. 单选框通过 name="gender" 绑定到同一组，确保只能选其一。
  2. 复选框允许用户选择多个兴趣爱好。
  3. 最后一个复选框添加了 required 属性，强制用户同意条款才能提交表单。

七、进阶技巧与常见问题

7.1 如何通过 JavaScript 获取选中值？

// 获取单选框选中的值  
const selectedGender = document.querySelector('input[name="gender"]:checked').value;

// 获取所有勾选的复选框  
const checkedInterests = Array.from(document.querySelectorAll('input[name="interests"]:checked')).map(input => input.value);

7.2 如何实现动态切换选项？

通过 JavaScript 监听复选框的 change 事件，可以实现选项的动态显示或隐藏：

document.getElementById('toggleOption').addEventListener('change', function() {
  if (this.checked) {
    document.getElementById('hiddenField').style.display = 'block';
  } else {
    document.getElementById('hiddenField').style.display = 'none';
  }
});

八、结论

Bootstrap5 的复选框与单选框组件，凭借其简洁的 API 和强大的样式系统，极大简化了表单开发的复杂度。无论是基础的勾选操作，还是进阶的动态交互，开发者都能通过本文提供的代码示例和技巧快速实现需求。掌握这一技能后，你可以进一步探索自定义 CSS、响应式布局或与第三方库（如 jQuery）的集成，让表单组件更加灵活多变。

通过持续实践和结合实际项目，你将能够熟练运用 Bootstrap5 的复选框与单选框，为用户提供直观、高效的交互体验。

最新发布

查看更多文章