<input>类型的元素checkbox默认呈现为方框，在激活时被检查（打勾）。它们允许您选择单个值来提交表单（或不选择）。

<input id="checkBox" type="checkbox">

注：单选按钮与复选框类似，但有一个重要的区别 - 单选按钮用于选择几个值中的一个，而复选框允许您打开和关闭单个值。在存在多个控件的情况下，单选按钮允许从其中选择一个，而复选框允许选择多个值。

Value

DOMString表示复选框的值。这在客户端是不可见的，但是在服务器端，数据name用复选框提交其值。以下面的例子：

<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。

注意：如果在提交表单时未选中复选框,则不会向服务器提交任何值，以表示其未选中状态(e.g. value=unchecked);;该值根本不会提交到服务器。

使用复选框输入

我们已经介绍了上面的复选框的最基本的用法。现在我们来看看您需要的其他常见复选框相关的功能和技巧。

处理多个复选框

我们上面看到的例子只包含一个复选框，在许多实例中，您可能会遇到多个复选框。如果他们是完全不相关的，那么你可以像上面所显示的那样把它们分开处理。不过，如果他们都是相关的，事情就不那么简单了。

例如，在下面的演示中，我们包含了多个复选框，以允许用户选择他们喜欢什么（请参阅示例部分中的完整版本）。

<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。当这些数据到达服务器端时，您应该能够将其捕获为相关值的数组，并进行相应处理 。

默认选中复选框

要使复选框在默认情况下被选中，只需将其赋予该checked属性即可。看下面的例子：

<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;

处于不确定状态的复选框在横向上具有水平线，而不是在大多数浏览器中检查/打勾。

这个属性的用例并不多，但下面的例子显示了一个。在这个例子中，我们跟踪我们正在收集的食谱的成分。当您选中或取消选中某个成分的复选框时，JavaScript函数会检查所选成分的总数：

• 如果没有选中，食谱的复选框设置为未选中。

• 如果选中了一个或两个，则食谱名称的复选框被设置为indeterminate。

• 如果全部三个选中，食谱名称的复选框设置为checked。

所以在这种情况下，indeterminate状态是用来说明收集成分已经开始, 但配方还没有完成。

  var overall = document.querySelector('input[id="EnchTbl"]');  var ingredients = document.querySelectorAll('ul input');

  overall.addEventListener('click', function(e) {
    e.preventDefault();  });  for(var i = 0; i < ingredients.length; i++) {
    ingredients[i].addEventListener('click', updateDisplay);  }  function updateDisplay() {    var checkedCount = 1;    for(var i = 0; i < ingredients.length; i++) {      if(ingredients[i].checked) {
        checkedCount++;      }    }    if(checkedCount === ingredients.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;    } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {
      overall.checked = false;
      overall.indeterminate = true;    } else {
      overall.checked = false;
      overall.indeterminate = false;    }  }

注意：如果您提交一个带有不确定复选框的表单，则会发生同样的情况，就好像该表单未被选中一样 - 没有提交数据来表示复选框。

验证

复选框支持验证（提供给所有人<input>）。但是，大多数ValidityState将始终为假。

如果复选框有required属性，但没有选中，那么ValidityState.valueMissing 将会为true

示例

以下示例是我们上面看到的“多个复选框”示例的扩展版本 - 它具有更多的标准选项，另外还有一个“其他”复选框，在选中时会导致文本字段显示为进入“其他”选项。这是通过一个简单的JavaScript块来实现的。该示例还包含一些CSS来改进样式。

<form>  <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>    <div>      <input type="checkbox" id="art" name="interest" value="art">      <label for="art">Art</label>    </div>    <div>      <input type="checkbox" id="sports" name="interest" value="sports">      <label for="sports">Sports</label>    </div>    <div>      <input type="checkbox" id="cooking" name="interest" value="cooking">      <label for="cooking">Cooking</label>    </div>    <div>      <input type="checkbox" id="other" name="interest" value="other">      <label for="other">Other</label>      <input type="text" id="otherValue" name="other">    </div>    <div>      <button type="submit">Submit form</button>    </div>  </fieldset></form>

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;}#otherValue{
  display: none;}#other:checked ~ #otherValue{
  display: inline-block;}

规范

浏览器兼容性