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