Bootstrap5 复选框和单选按钮

在本章节中，我们将详细探讨如何使用 Bootstrap 5 来创建和自定义复选框和单选按钮。这些组件在许多表单场景中都非常有用，比如用户偏好设置、多选或多选问题等。

基础用法

复选框

Bootstrap 提供了基本的复选框样式，只需添加适当的类即可。以下是一个基础的复选框示例：

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

单选按钮

单选按钮通常用于让用户从一组选项中选择一个。同样地，通过添加适当的类来实现基本样式：

// www.javascriptcn.com code example
<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>

自定义样式

自定义复选框和单选按钮

Bootstrap 允许对复选框和单选按钮进行自定义，可以通过一些简单的 CSS 修改来改变它们的外观。例如，你可以为它们添加自定义的颜色或图标。

自定义颜色

// www.javascriptcn.com code example
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="customCheck1" style="accent-color: #007bff;">
  <label class="form-check-label" for="customCheck1">
    自定义颜色的复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadio" id="customRadio1" value="" style="accent-color: #dc3545;">
  <label class="form-check-label" for="customRadio1">
    自定义颜色的单选按钮
  </label>
</div>

添加图标

// www.javascriptcn.com code example
<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  <label class="form-check-label" for="blankCheckbox">
    <i class="fas fa-check"></i> 带图标的复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" aria-label="...">
  <label class="form-check-label" for="optionsRadios1">
    <i class="fas fa-star"></i> 带图标的单选按钮
  </label>
</div>

使用辅助类

Bootstrap 还提供了一些辅助类，可以用来快速改变复选框和单选按钮的状态或外观。

状态辅助类

• .disabled：禁用状态

// www.javascriptcn.com code example
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="disabledCheck" disabled>
  <label class="form-check-label" for="disabledCheck">
    禁用的复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="disabledOptions" id="disabledRadio" value="option1" disabled>
  <label class="form-check-label" for="disabledRadio">
    禁用的单选按钮
  </label>
</div>

颜色辅助类

• .text-primary
• .text-secondary
• .text-success
• .text-danger
• .text-warning
• .text-info
• .text-light
• .text-dark
• .text-white

// www.javascriptcn.com code example
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="colorCheck1" style="accent-color: #007bff;">
  <label class="form-check-label text-primary" for="colorCheck1">
    主要颜色的复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="colorOptions" id="colorRadio1" value="option1" style="accent-color: #dc3545;">
  <label class="form-check-label text-danger" for="colorRadio1">
    危险颜色的单选按钮
  </label>
</div>

表格内的复选框和单选按钮

有时你需要在表格中放置复选框或单选按钮。在这种情况下，可以使用 table 类结合其他 Bootstrap 类来实现。

// www.javascriptcn.com code example
<table class="table">
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">选择</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="check1">
        </div>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="check2">
        </div>
      </td>
    </tr>
  </tbody>
</table>

动态交互

控制复选框和单选按钮的状态

你可以使用 JavaScript 或 jQuery 来动态控制复选框和单选按钮的状态。例如，根据某些条件启用或禁用它们。

// www.javascriptcn.com code example
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="dynamicCheck" onclick="toggleRadio()">
  <label class="form-check-label" for="dynamicCheck">
    动态控制的复选框
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="dynamicRadio" id="dynamicRadio1" value="option1">
  <label class="form-check-label" for="dynamicRadio1">
    动态控制的单选按钮
  </label>
</div>

<script>
function toggleRadio() {
  const checkbox = document.getElementById('dynamicCheck');
  const radio = document.getElementById('dynamicRadio1');

  if (checkbox.checked) {
    radio.disabled = false;
  } else {
    radio.disabled = true;
  }
}
</script>

以上是关于 Bootstrap 5 中复选框和单选按钮的详细介绍。通过这些基础知识和技巧，你可以轻松地在项目中使用这些组件，并根据需要进行定制化处理。