bootstrap 多選框和單選框

多選框（checkbox）用于選擇列表中的一個(gè)或多個(gè)選項(xiàng)，而單選框（radio）用于從多個(gè)選項(xiàng)中只選擇一個(gè)。


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


默認(rèn)外觀（堆疊在一起）


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>

---

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

通過(guò)將 .checkbox-inline 或 .radio-inline 類應(yīng)用到一系列的多選框（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">國(guó)家</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>

效果:

單擊:

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

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

效果: