HTML参考手册
标签 | Elements
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) |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。