复选框

复选框-Bootstrap 5和Material Design 2.0表格

复选框是一个组件，用于允许用户做出广泛的多项选择 用于表格和调查。复选框用于选择列表中的一个或多个选项， 而 无线电（选项）按钮用于选择一个选项 从很多。

基本例子

使用 .form-check 代替浏览器默认复选框和单选框， 两种输入类型的一系列类，可改善HTML的布局和行为 元素，可提供更大的自定义和跨浏览器的一致性。复选框用于 在列表中选择一个或多个选项，而收音机则是从中选择一个选项 许多。

在结构上，我们的<input>s 和 <label>s 在同级 元素与<input> 在一个 <label>. 这个 如您必须指定的那样，稍微冗长一些 id 和 for 属性 关联 <input> and <label>.

我们使用兄弟选择器(~) 为了我们所有 <input>状态， 喜欢 :checked 要么 :disabled.当与 .form-check-label 类，我们可以根据 <input>的状态。 


          <!-- Default checkbox -->
          <div class="form-check">
            <input 
              class="form-check-input" 
              type="checkbox" 
              value="" 
              id="flexCheckDefault" 
            />
            <label class="form-check-label" for="flexCheckDefault">
              Default checkbox
            </label>
          </div>

          <!-- Checked checkbox -->
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="flexCheckChecked"
              checked
            />
            <label class="form-check-label" for="flexCheckChecked">
              Checked checkbox
            </label>
          </div>

残障人士

添加 disabled 属性和关联的 <label>s 是 自动设置样式以与较浅的颜色匹配，以帮助指示输入状态。 


          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="flexCheckDisabled"
              disabled
            />
            <label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label>
          </div>

          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="flexCheckCheckedDisabled"
              checked
              disabled
            />
            <label class="form-check-label" for="flexCheckCheckedDisabled">
              Disabled checked checkbox
            </label>
          </div>

排队

通过添加将同一水平行上的复选框或单选按钮分组 .form-check-inline 到任何 .form-check 。


          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
            <label class="form-check-label" for="inlineCheckbox1">1</label>
          </div>

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
            <label class="form-check-label" for="inlineCheckbox2">2</label>
          </div>

          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="checkbox"
              id="inlineCheckbox3"
              value="option3"
              disabled
            />
            <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
          </div>

没有标签

对于没有标签文本的复选框和单选框，请省略包装的 .form-check 。 请记住，仍要为辅助技术提供某种形式的标签（例如，使用 aria-label ）。


          <div>
            <input
              class="form-check-input"
              type="checkbox"
              id="checkboxNoLabel"
              value=""
              aria-label="..."
            />
          </div>

          <div>
            <input
              class="form-check-input"
              type="checkbox"
              id="checkboxNoLabel2"
              value=""
              aria-label="..."
            />
          </div>

切换按钮

MDB的 .btn 样式可以应用于 <label>s, 提供 复选框样式按钮切换。添加带有.btn-check 上一课 同级切换输入状态。 


          <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" />
          <label class="btn btn-primary" for="btn-check">Checkbox button</label>

          <input type="checkbox" class="btn-check" id="btn-check2" checked autocomplete="off" />
          <label class="btn btn-primary" for="btn-check2">Checkbox button</label>

          <input type="checkbox" class="btn-check" id="btn-check3" autocomplete="off" />
          <label class="btn btn-primary" for="btn-check3">Checkbox button</label>