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

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

Value

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

 
  Subscribe to newsletter? 
 
 Subscribe 

在这个例子中，我们有一个名字subscribe和一个值newsletter。当表单提交时，数据名称/值对将会是subscribe=newsletter。

如果该value属性被省略，则提交的数据将被赋予默认值on，所以在这种情况下提交的数据将是subscribe=on。

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

使用复选框输入

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

处理多个复选框

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

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

 
Choose your interests
 
  Coding 
 
  Music 

在这个例子中，你会看到我们已经给每个复选框相同name。如果两个复选框都被选中，然后表单被提交，你会得到一个像这样提交的名称/值对的字符串：interest=coding&interest=music。当这些数据到达服务器端时，您应该能够将其捕获为相关值的数组，并进行相应处理 。

默认选中复选框

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

 
Choose your interests
 
  Coding 
 
  Music 

为您的复选框提供更大的区域

在上面的例子中，您可能已经注意到，您可以通过单击其关联元素以及复选框本身来检查复选框。这是HTML表单标签的一个非常有用的功能，可以更轻松地单击您想要的选项，尤其是在手机等小屏幕设备上。

除了可访问性，这是在表单上正确设置元素的另一个很好的理由。

不确定状态复选框

存在不确定状态的复选框，其中不选中或未选中，但未确定。这是通过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; } }

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

验证

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

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

示例

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

 
 
Choose your interests
 
  Coding 
 
  Music 
 
  Art 
 
  Sports 
 
  Cooking 
 
  Other  
 
 Submit 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;}

规范

浏览器兼容性