前言
radio 是純情的男孩，選中一位女孩後就專心好好愛她；
checkbox 是花心的男孩，選一個也是可以，但他更喜歡腳踏好幾條船。
有人愛 radio 也會有人愛 checkbox ，問世間情為何物，直教人生死相許。
（ 圖片來源 ）
官方網站的 Checks and radios 頁面
透過 form-check 的預設 checkbox 和 radio ，再藉由一系列的 class 來改進這兩種輸入類型的 HTML 元素的排版和行為，並提供更好的自定義功能與跨瀏覽器間的一致性。
- 核取方塊（ checkbox ）被用來選取列表中的
一個或多個選項。 - 選項按鈕（ radio ）則被用來從多個選項中選取
一個項目。
在結構上 Bootstrap 的 input 和 label 是兄弟元素，而不是 label 內包含 input ，因為你必須指定 id 與 for 屬性來讓 input 與 label 產生關連。
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>
<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>
Indeterminate （ 不確定的 ）
視覺上， checkbox 有三種狀態： checked （ 選中的 ）、 unchecked （ 未選中的 ）、 indeterminate （ 不確定的 ），但是表單提交時 checkbox 的值只能是 checked 或 unchecked 。
對於 indeterminate 狀態的 checkbox 需要注意的是：無法在 HTML 中設置 checkbox 的狀態為 indeterminate ，因為 HTML 中沒有這個屬性，可以通過 Javascript 或者 jQuery 來設置它。
HTML
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>
JavaScript
<script>
var checkbox = document.getElementById("flexCheckIndeterminate");
checkbox.indeterminate = true;
</script>
jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("#flexCheckIndeterminate").prop("indeterminate", true ); // prop is jQuery 1.6+
</script>
禁用
添加 disabled 屬性，則相關聯的 <label> 則會自動設置較淺顏色的樣式來匹配，幫助指示 input 的狀態。
<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>
radio 選項按鈕
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
禁用
添加 disabled 屬性，則相關聯的 <label> 則會自動設置較淺顏色的樣式來匹配，幫助指示 input 的狀態。
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
Disabled checked radio
</label>
</div>
切換開關
切換開關元件具有自定義核取方塊的標記，但使用 form-switch 類別來呈現切換開關，開關也支援 disabled 屬性。
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
垂直間距
預設情況下，同級任意數量的核取方塊和選項按鈕將被垂直堆疊，並與 form-check 適當間隔。
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</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>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
