input type="checkbox"

<input type="checkbox">

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

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

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

值	代表复选框值的DOMString。
活动	改变和输入
支持的通用属性	检查
IDL属性	检查和价值
方法	选择（）

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

规范

规范	状态
HTML生活标准该规范中'<input type =“复选框”>“的定义。	生活水平
HTML5该规范中的'<input type =“复选框”>“的定义。	建议

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	4.0 (2.0)	(Yes)	(Yes)	(Yes)