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

方法一：包装标签标签

将复选框包装在 label 标记中：

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

方法二：使用 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 元素的内容内。在这种情况下，标签可能只包含一个控制元素。标签本身可以位于相关控件之前或之后。

与 for 相比，使用此方法有一些优势：

无需为每个复选框分配一个 id（太棒了！）。

无需在 中使用额外的属性。

输入的可点击区域也是标签的可点击区域，因此没有两个单独的可以点击的地方可以控制复选框 - 只有一个，无论 和实际标签文本相距多远，无论哪种类型应用到它的 CSS。

带有一些 CSS 的演示：

标签{边框：1px实心#ccc；填充：10px；边距：0 0 10px；显示：块； } 标签：悬停 { 背景：#eee;光标：指针； } 选项1 选项2 选项3

---

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

<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 和闪烁的浏览器（Chrome(ium) , Safari, Opera....) 以及大多数移动浏览器。此处不支持 Firefox 或 IE。
这可能仅在将 webkit/blink 嵌入到您的应用中时有用。

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

[type=checkbox]:after { content: attr(value);边距：-3px 15px；垂直对齐：顶部；空白：nowrap；显示：内联块； }

演示：http://codepen.io/mrmoje/pen/oteLl，+ The gist of it

---

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

---

标签{边框：1px实心#ccc；填充：10px；边距：0 0 10px；显示：块； } 标签：悬停 { 背景：#eee;光标：指针； } 选项1 选项2 选项3

---

这应该可以帮助您：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>

---

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

---

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

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

---

在带有复选框的 Angular 材质标签中

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

---

用这个

<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');
    });
});

---