以下是关于 Bootstrap 5 中 复选框（Checkboxes） 和 单选框（Radio Buttons） 的详细讲解，包括基本用法、样式自定义以及与表单验证的集成。作为一名专业开发工程师，我将为您提供结构化且实用的内容。
Bootstrap 5 复选框与单选框
1. 复选框与单选框简介
Bootstrap 5 通过 .form-check 类为复选框和单选框提供了美观且一致的样式。
- 复选框：允许多选，适用于需要用户选择多个选项的场景。
- 单选框：只允许单选，适用于互斥选择的场景。
官方文档可参考：Bootstrap 5 Forms – Checks and Radios。
2. 基本用法
复选框
复选框的基本结构如下：
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" value="option1">
<label class="form-check-label" for="check1">选项 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check2" value="option2">
<label class="form-check-label" for="check2">选项 2</label>
</div>
.form-check：容器类，提供基本的间距和布局。.form-check-input：为<input>添加样式。.form-check-label：为<label>添加样式，确保与输入框对齐。
单选框
单选框需要设置相同的 name 属性以实现互斥选择：
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio1" value="option1">
<label class="form-check-label" for="radio1">选项 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="radio2" value="option2">
<label class="form-check-label" for="radio2">选项 2</label>
</div>
name="radioGroup"：将单选框分组，确保只能选择一个选项。
3. 样式与自定义
开关样式复选框
Bootstrap 5 支持将复选框显示为开关（Toggle Switch）样式：
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch1">
<label class="form-check-label" for="switch1">开关</label>
</div>
.form-switch：添加到.form-check上，启用开关样式。
行内排列
使用 .form-check-inline 类可将复选框或单选框排列在同一行：
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheck1" value="option1">
<label class="form-check-label" for="inlineCheck1">选项 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheck2" value="option2">
<label class="form-check-label" for="inlineCheck2">选项 2</label>
</div>
4. 与表单验证结合
Bootstrap 5 的表单验证功能也适用于复选框和单选框。以下是一个复选框必选的示例：
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkAgreement" required>
<label class="form-check-label" for="checkAgreement">同意协议</label>
<div class="invalid-feedback">您必须同意协议才能继续。</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
(function () {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
required：标记复选框为必选。.invalid-feedback：显示验证失败时的错误提示。needs-validation和novalidate：启用 Bootstrap 的自定义验证样式。
5. 无障碍访问支持
为提升可访问性，建议：
- 使用
<label>并通过for属性关联对应的<input>。 - 如有额外描述，可添加
aria-describedby。
示例：
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" aria-describedby="checkHelp">
<label class="form-check-label" for="check1">选项 1</label>
<small id="checkHelp" class="form-text text-muted">选择此项以...</small>
</div>
6. 常见问题与解决方案
- 问题：样式未正确应用。
解决：检查是否正确添加了.form-check、.form-check-input和.form-check-label类。 - 问题：开关样式未生效。
解决：确保在.form-check上添加了.form-switch类。 - 问题：表单验证提示不显示。
解决：确认<form>有needs-validation类，且错误提示（如.invalid-feedback）正确放置。
7. 参考资源
- 官方文档：Bootstrap 5 Checks and Radios
- 表单验证：Bootstrap 5 Validation
- 无障碍访问指南：MDN – ARIA
总结
Bootstrap 5 的复选框和单选框通过 .form-check 类提供了灵活且美观的实现方式，支持开关样式、行内排列和表单验证。结合正确的标签和 ARIA 属性，可以进一步提升用户体验和可访问性。如果您有更具体的需求（例如动态生成选项或与后端交互），请告诉我，我可以提供更详细的方案！
发表回复