F2E合作社｜checkbox核取方塊和radio選項按鈕｜Bootstrap 5網頁框架開發入門

前言

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>

參考資料

1. Checks and radios · Bootstrap v5.0
2. 核取方塊和選項按鈕 (Checks and radios) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. Checkbox 與 Radio 組件 - 金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
4. 【翻译】checkbox的第三种状态