©
Dokumen ini menggunakanManual laman web PHP CinaLepaskan
类型的元素
checkbox
默认呈现为方框,在激活时被检查(打勾)。它们允许您选择单个值来提交表单(或不选择)。
注:单选按钮与复选框类似,但有一个重要的区别 - 单选按钮用于选择几个值中的一个,而复选框允许您打开和关闭单个值。在存在多个控件的情况下,单选按钮允许从其中选择一个,而复选框允许选择多个值。
值 |
代表复选框值的DOMString。 |
---|---|
活动 |
改变和输入 |
支持的通用属性 |
检查 |
IDL属性 |
检查和价值 |
方法 |
选择() |
DOMString
表示复选框的值。这在客户端是不可见的,但是在服务器端,数据name
用复选框提交其值。以下面的例子:
在这个例子中,我们有一个名字subscribe
和一个值newsletter
。当表单提交时,数据名称/值对将会是subscribe=newsletter
。
如果该value
属性被省略,则提交的数据将被赋予默认值on
,所以在这种情况下提交的数据将是subscribe=on
。
注意:如果在提交表单时未选中复选框,则不会向服务器提交任何值,以表示其未选中状态(e.g.value=unchecked
);;该值根本不会提交到服务器。
我们已经介绍了上面的复选框的最基本的用法。现在我们来看看您需要的其他常见复选框相关的功能和技巧。
我们上面看到的例子只包含一个复选框,在许多实例中,您可能会遇到多个复选框。如果他们是完全不相关的,那么你可以像上面所显示的那样把它们分开处理。不过,如果他们都是相关的,事情就不那么简单了。
例如,在下面的演示中,我们包含了多个复选框,以允许用户选择他们喜欢什么(请参阅示例部分中的完整版本)。
在这个例子中,你会看到我们已经给每个复选框相同name
。如果两个复选框都被选中,然后表单被提交,你会得到一个像这样提交的名称/值对的字符串:interest=coding&interest=music
。当这些数据到达服务器端时,您应该能够将其捕获为相关值的数组,并进行相应处理 。
要使复选框在默认情况下被选中,只需将其赋予该checked
属性即可。看下面的例子:
在上面的例子中,您可能已经注意到,您可以通过单击其关联元素以及复选框本身来检查复选框。这是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来改进样式。
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生活标准该规范中'“的定义。 |
生活水平 |
|
HTML5该规范中的'“的定义。 |
建议 |
|
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) |