如何创建带有可点击标签的复选框？

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

方法一：包裹标签标签

将复选框包裹在label tag:

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

方法 2：使用for属性

Use the for属性（匹配复选框id):

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

NOTE：ID在页面中必须是唯一的！

解释

由于其他答案没有提及，标签最多可以包含 1 个输入并省略for属性，并且将假定它用于其中的输入。

摘自w3.org http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1（我强调）：

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

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

使用这种方法有一些优点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>