<input type="checkbox">

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<input> 元素，其型別為 checkbox，預設情況下呈現為複選框，當被啟用時（例如在官方政府紙質表格中），複選框會被選中（打勾）。具體外觀取決於瀏覽器執行的作業系統配置。通常是一個正方形，但可能有圓角。複選框允許你選擇單個值以在表單中提交（或不提交）。

試一試

<fieldset>
  <legend>Choose your monster's features:</legend>

  <div>
    <input type="checkbox" id="scales" name="scales" checked />
    <label for="scales">Scales</label>
  </div>

  <div>
    <input type="checkbox" id="horns" name="horns" />
    <label for="horns">Horns</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

注意： 單選按鈕與複選框相似，但有一個重要區別 —— 同名的單選按鈕被分組到一個集合中，一次只能選擇一個單選按鈕，而複選框允許你單獨開啟或關閉單個值。當存在多個同名控制元件時，單選按鈕允許從所有控制元件中選擇一個，而複選框允許選擇多個值。

值

表示複選框值的字串。這不會顯示在客戶端，但在伺服器端，這是隨複選框的 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>

在此示例中，我們有一個 name 為 subscribe，一個 value 為 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 # 複選框狀態（型別=複選框）

瀏覽器相容性

另見

:checked, :indeterminate: CSS 選擇器，可根據複選框的當前狀態對其進行樣式設定
HTMLInputElement: 實現 <input> 元素的 HTML DOM API

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者最後修改於 2025 年 7 月 9 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題