非常教程

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)

HTML

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