Bootstrap - 复选框和单选按钮

本章将讨论 Bootstrap 提供的复选框和无线电实用程序。复选框允许您从列表中选择一个或多个选项，而单选按钮允许您仅选择一个。

方法

Bootstrap 提供了包装类.form-check来改进浏览器默认复选框和单选元素的布局和Behave。它还允许更好的定制和跨浏览器一致性。
.form-check-label类用于显示复选框标签。
.form-check-input类用于输入类型复选框。
从结构上讲，输入和标签充当兄弟姐妹。

Bootstrap 的自定义图标用于显示选中或不确定状态。

复选框

复选框从列表中选择一个或多个选项。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck">
      <label class="form-check-label" for="defaultCheck">
       item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
      <label class="form-check-label" for="flexCheckChecked">
        item 2
      </label>
    </div>
  </body>
  </html>

不定

:inminated伪类用于创建中间状态复选框。
不确定状态是通过 JavaScript 设置的，因为没有等效的 HTML 属性可用于指定它。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" >
      <label class="form-check-label" for="indeterminateCheckbox">
         item 1
      </label>
    </div>

  <script>

      var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;

  </script>
  </body>
  </html>

禁用复选框

要指示禁用状态，请使用禁用属性。这使得关联的<label>颜色变浅，指示禁用状态。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled>
      <label class="form-check-label" for="disabledIndeterminateCheckbox">
         item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledCheckedCheckbox">
         item 2
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       item 3
      </label>
    </div>
  </body>
  <script>
    var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
  </script>
  </html>

收音机

单选按钮将选项数量限制为列表中只有一个。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio">
      <label class="form-check-label" for="defaultRadio">
        Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked>
      <label class="form-check-label" for="defaultCheckRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

禁用单选按钮

要指示禁用状态，请使用禁用属性，并且关联的<label>的样式采用较浅的颜色。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled>
      <label class="form-check-label" for="disabledRadio">
         Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled>
      <label class="form-check-label" for="disabledCheckedRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

开关

该开关具有自定义复选框标记，可使用.form-switch类呈现切换。使用role="switch"将控制类型传达给辅助技术。
交换机支持disabled属性。较旧的辅助技术刚刚宣布将其作为普通复选框作为后备。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox">
      <label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked>
      <label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled>
      <label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label>
    </div>
  </body>
  </html>

默认复选框和单选按钮（堆叠）

单选按钮和复选框可以使用.form-check类垂直堆叠。

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2">
      <label class="form-check-label" for="defaultStackedRadio">
       English
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled>
      <label class="form-check-label" for="disabledStackedRadio">
        Hindi
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
      <label class="form-check-label" for="defaultCheckbox">
      Marathi
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       Japanes
      </label>
    </div>
  </body>
  </html>

排队

要将复选框和单选按钮放在一起，请将.form-check-inline类与任何.form-check一起使用。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1">
      <label class="form-check-label" for="inlineDeafultRadio">English</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledRadio">Hindi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1">
      <label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label>
    </div>
  </body>
  </html>

撤销

使用.form-check-reverse修饰符类将复选框、单选按钮和开关放置在相对侧。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-reverse">
      <h4>Inline Checkboxes</h4>
      <input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox">
      <label class="form-check-label" for="deafultReverseCheckbox">
       English
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled>
      <label class="form-check-label" for="disabledReverseCheckbox">
       Hindi
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="checkbox" id="switchReverseCheckbox">
      <label class="form-check-label" for="switchReverseCheckbox">Wifi</label>
    </div>
    <div class="form-check form-check-reverse">
      <h4>Inline Radios</h4>
      <input class="form-check-input" type="radio" value="" id="deafultReverseRadio">
      <label class="form-check-label" for="deafultReverseRadio">
       Marathi
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled>
      <label class="form-check-label" for="disabledReverseRadio">
        Japanes
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="radio" id="switchReverseRadio">
      <label class="form-check-label" for="switchReverseRadio">Bluetooth</label>
    </div>
  </body>
  </html>

无标签

跳过没有标签文本的复选框和单选框的包装类.form-check 。
为辅助技术提供一个易于理解的名称（例如，使用aria-label）。有关信息，请参阅表单概述部分的辅助功能部分。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div>
      <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
      Item 1
    </div>

    <div>
      <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
      Item 2
    </div>
  </body>
  </html>

切换按钮

在<label>元素上使用.btn类而不是.form-check-label来创建类似按钮的复选框和单选按钮。这些切换按钮也可以一起放置在按钮组中。
使用.btn-check类，表示输入是按钮型复选框。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h5>Checkbox Toggle Buttons</h5>
    <input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label>

    <input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label>

    <input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleChecbox">Item 3</label>

    <h5>Radios Toggle Buttons</h5>
    <input type="radio" class="btn-check"  id="defaultToggleRadio" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleRadio">Item 1</label>

    <input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label>

    <input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleRadio">Item 3</label>
  </body>
  </html>

轮廓样式

支持.btn的不同变体，包括不同的轮廓样式，如下例所示。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off">
    <label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br>

    <input type="checkbox " class="btn-check" id="checkedOutlineCheckbox" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedOutlineCheckbox">Checked</label><br><br>

    <input type="radio" class="btn-check" name="options-outlined" id="checkedOutlineRadio" autocomplete="off" checked>
    <label class="btn btn-info" for="checkedOutlineRadio">Checked success radio</label>

    <input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off">
    <label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label>
  </body>
  </html>