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

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

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

方法一：包装标签标签

将复选框包装在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>

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

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

使用label元素和for属性将其与复选框关联：

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

<label for="my_checkbox">Check me</label><input type="checkbox" name="my_checkbox" value="Car" />

这可以帮助你：W3学校-标签

<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form>

它也工作：

<form><label for="male"><input type="checkbox" name="male" id="male" />Male</label><br /><label for="female"><input type="checkbox" name="female" id="female" />Female</label></form>

您还可以使用CSS伪元素（分别）从所有复选框的值属性中选择和显示您的标签。
编辑：这仅适用于基于webkit和blink的浏览器（Chrome（ium）、Safari、Opera……）以及大多数移动浏览器。此处不支持Firefox或IE。
这可能仅在将webkit/blink嵌入到您的应用程序时有用。

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

[type=checkbox]:after {content: attr(value);margin: -3px 15px;vertical-align: top;white-space: nowrap;display: inline-block;}

<input type="checkbox" value="My checkbox label value" />

Demo:http://codepen.io/mrmoje/pen/oteLl, + The gist of it

用这个

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

$("#checkbox_lbl").click(function(){if($("#checkbox_id").is(':checked'))$("#checkbox_id").removAttr('checked');else$("#checkbox_id").attr('checked');});});

在带复选框的角材料标签中

<mat-checkbox>Check me!</mat-checkbox>