复选框

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

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


基本例子

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

在结构上,我们的<input>s 和 <label>s 在同级 元素与<input> 在一个 <label>. 这个 如您必须指定的那样,稍微冗长一些 idfor 属性 关联 <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>