多選框（checkbox）用于選擇列表中的一個或多個選項，而單選框（radio）用于從多個選項中只選擇一個。


設置了 disabled 屬性的單選或多選框都能被賦予合適的樣式。對于和多選或單選框聯(lián)合使用的 <label> 標簽，如果也希望將懸停于上方的鼠標設置為“禁止點擊”的樣式，請將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。


默認外觀（堆疊在一起）


Option one is this and that—be sure to include why it's great
Option two is disabled


Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one

Option three is disabled

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>


<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

---

內聯(lián)單選和多選框

通過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可以使這些控件排列在一行。

1 2 3
1 2 3

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>


<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

---

單選框代碼:

<label for="country">國家</label>
    <select id="country">
        <option value="1">China</option>
        <option value="2">United States</option>
        <option value="3">Japan</option>
        <option value="4">England</option>
    </select>

效果:

單擊:

多選框的實現(xiàn) 直接在Select標簽加上multiple="multiple" 即可 代碼如下:

<select id="country" multiple="multiple">

效果: