©
本文档使用
php中文网手册 发布
<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) |