如何使用可点击标签创建HTML复选框

Question

如何创建一个带有可点击标签的HTML复选框(这意味着单击标签会打开/关闭复选框)？

Answer 1

方法1:包装标签标签

在label标签中包装复选框:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

方法2:使用for属性

使用该for属性(匹配复选框id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

注意:页面上的ID必须是唯一的!

说明

由于其他答案没有提到它,标签最多可以包含1个输入并省略该for属性,并且假定它是用于其中的输入.

来自w3.org的摘录(我强调):

[for属性]显式将正在定义的标签与另一个控件相关联.如果存在,则此属性的值必须与同一文档中某个其他控件的id属性的值相同.如果不存在,则定义的标签与元素的内容相关联.

要隐式地将标签与另一个控件相关联,控制元素必须位于LABEL元素的内容中.在这种情况下,LABEL可能只包含一个控制元素.标签本身可以位于相关控件之前或之后.

使用此方法有一些优点for:

• 无需id为每个复选框分配一个(太棒了!).

• 无需使用中的额外属性<label>.

• 输入的可点击区域也是标签的可点击区域,因此没有两个单独的位置可以控制复选框 - 只有一个,无论<input>标签和实际标签文本有多远,无论您使用哪种CSS适用于它.

用一些CSS演示:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Answer 2

只需确保标签与输入相关联.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

Answer 3

您还可以使用CSS伪元素从所有复选框的值属性(分别)中选择和显示标签.
编辑:这只适用于webkit和基于blink的浏览器(Chrome(ium),Safari,Opera ....),因此大多数移动浏览器都适用.这里没有Firefox或IE支持.
这可能仅在将webkit/blink嵌入到您的应用中时才有用.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

所有伪元素标签都是可点击的.

演示:http://codepen.io/mrmoje/pen/oteLl,+ 它的要点

Answer 4

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />