<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 属性兼容性表