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

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属性的值相同。
如果不存在，则定义的标签与元素的内容相关联。

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

使用此方法具有以下优点for：

• 无需将分配id给每个复选框（很棒！）。

• 无需在中使用extra属性<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>