<input type="checkbox">

型別為**checkbox**的<input>元素預設情況下呈現為框，當啟用時會被選中（勾選），就像您可能在官方政府檔案表格中看到的那樣。確切的外觀取決於瀏覽器執行的作業系統配置。通常情況下，它是一個正方形，但可能會有圓角。複選框允許您在表單中選擇單個值以進行提交（或不提交）。

嘗試一下

注意：單選按鈕類似於複選框，但有一個重要的區別 - 具有相同名稱的單選按鈕被分組到一個集合中，一次只能選擇一個單選按鈕，而複選框允許您開啟和關閉單個值。如果存在多個具有相同名稱的控制元件，單選按鈕允許您從所有控制元件中選擇一個，而複選框允許您選擇多個值。

值

表示複選框值的字串。它不會在客戶端顯示，但在伺服器端，它是與複選框的name一起提交的資料中給出的value。以下是一個例子

html

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

在這個例子中，我們有一個名為subscribe，值為newsletter。當提交表單時，資料名稱/值對將是subscribe=newsletter。

如果省略了value屬性，複選框的預設值為on，因此在這種情況下提交的資料將是subscribe=on。

注意：如果複選框在提交其表單時未選中，則不會將名稱或值提交到伺服器。沒有 HTML 僅方法來表示複選框的未選中狀態（例如value=unchecked）。如果您希望在複選框未選中時提交複選框的預設值，您可以包含 JavaScript 以在表單中建立一個<input type="hidden">，其值為一個表示未選中狀態的值。

其他屬性

除了所有<input>元素共有的通用屬性之外，“checkbox”輸入還支援以下屬性。

checked: 一個布林屬性，指示此複選框在預設情況下是否選中（頁面載入時）。它不指示此複選框當前是否選中：如果複選框的狀態發生改變，此內容屬性不會反映該改變。（只有HTMLInputElement的checked IDL 屬性被更新。）

注意：與其他輸入控制元件不同，複選框的值只有在複選框當前為checked時才會包含在提交的資料中。如果是，則報告的值是複選框value屬性的值，如果沒有設定value，則為on。與其他瀏覽器不同，Firefox 預設情況下會跨頁面載入保留<input>的動態選中狀態。使用autocomplete屬性來控制此功能。
value: value屬性是所有<input>共享的屬性；但是，它對型別為checkbox的輸入具有特殊用途：當提交表單時，只有當前選中的複選框會被提交到伺服器，並且報告的值是value屬性的值。如果沒有另外指定value，預設情況下為字串on。這在上面的值部分中有說明。

使用複選框輸入

我們已經介紹了複選框的最基本用法。現在讓我們看一下您需要了解的其他常見覆選框相關功能和技術。

處理多個複選框

我們上面看到的例子只包含一個複選框；在實際情況中，您很可能會遇到多個複選框。如果它們完全無關，則可以像上面那樣分別處理它們。但是，如果它們都相關，事情就不那麼簡單了。

例如，在下面的演示中，我們包含了多個複選框，允許使用者選擇他們的興趣（請參閱示例部分中的完整版本）。

html

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

在這個例子中，您會看到我們為每個複選框都指定了相同的name。如果選中了兩個複選框，然後提交了表單，您將收到一個像這樣的提交的名稱/值對字串：interest=coding&interest=music。當此字串到達伺服器時，您需要對它進行解析，而不是作為關聯陣列進行解析，因此會捕獲所有interest的值，而不僅僅是最後一個值。例如，對於在 Python 中使用的一種技術，請參閱使用單個伺服器端變數處理多個複選框。

預設情況下選中複選框

要預設選中一個複選框，您需要給它一個checked屬性。請參閱以下示例

html

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

為複選框提供更大的點選區域

在上面的例子中，您可能已經注意到，您不僅可以透過點選複選框本身，還可以透過點選其關聯的<label>元素來切換複選框。這是 HTML 表單標籤的一個非常有用的功能，它使得點選您想要的選項變得更容易，尤其是在手機等小型裝置上。

除了無障礙訪問之外，這也是在您的表單上正確設定<label>元素的另一個好理由。

不確定狀態複選框

複選框可以處於**不確定**狀態。這可以透過 JavaScript 使用 HTMLInputElement 物件的 indeterminate 屬性設定（無法使用 HTML 屬性設定）。

inputInstance.indeterminate = true;

當 indeterminate 為 true 時，複選框在大多數瀏覽器中會在框中顯示一條水平線（看起來有點像連字元或減號），而不是勾號/對勾。

注意：這純粹是視覺上的變化。它不會影響複選框的 value 是否在表單提交中使用。這由 checked 狀態決定，而與 indeterminate 狀態無關。

此屬性的用例並不多。最常見的是，當一個複選框可以“擁有”多個子選項（它們也是複選框）時。如果所有子選項都被選中，則擁有複選框也被選中，如果它們都被取消選中，則擁有複選框也被取消選中。如果一個或多個子選項與其他子選項的狀態不同，則擁有複選框處於不確定狀態。

這可以在下面的示例中看到（感謝 CSS Tricks 提供的靈感）。在此示例中，我們跟蹤正在為食譜收集的食材。當您選中或取消選中食材的複選框時，一個 JavaScript 函式會檢查選中食材的總數。

如果沒有任何食材被選中，則食譜名稱的複選框將被設定為未選中。
如果選中了一兩個食材，則食譜名稱的複選框將被設定為 indeterminate。
如果所有三個食材都被選中，則食譜名稱的複選框將被設定為 checked。

因此，在這種情況下，indeterminate 狀態用於表明食材收集已開始，但食譜尚未完成。

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        Coding
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        Music
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        Art
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        Sports
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        Cooking
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        Other
      </label>
      <input
        type="text"
        id="otherValue"
        name="other"
        aria-label="Other interest" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

css

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

技術概述

值	表示複選框值的字串。
事件	`change` 和 `input`
支援的通用屬性	`checked`
IDL 屬性	`checked`、`indeterminate` 和 `value`
DOM 介面	`HTMLInputElement`
方法	`select()`
隱式 ARIA 角色	`checkbox`

規範

規範
HTML 標準 # checkbox-state-(type=checkbox)

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

:checked、:indeterminate：允許您根據複選框當前狀態對其進行樣式設定的 CSS 選擇器
HTMLInputElement：實現 <input> 元素的 HTML DOM API
表單控制元件的 CSS 屬性相容性表