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

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

答案

方法 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>使用 extra 属性。
输入的可点击区域也是标签的可点击区域，因此没有两个单独的位置可以控制复选框 - 只有一个，无论<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>

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

<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>

您还可以使用 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，+ 它的要点

答案

方法 1：包装标签标签

方法 2：使用for属性

说明

方法 2：使用`for`属性