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

In Angular material label with checkbox

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

Use the label element, and the for attribute to associate it with the checkbox:

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

This should help you: W3Schools - Labels

<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伪元素分别从复选框的所有value属性中选择并显示标签。
编辑：这仅适用于基于Webkit和基于眨眼的浏览器（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，+ 它的要点

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

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

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

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