如何使用可点击标签创建HTML复选框
如何创建一个可点击标签的HTML复选框（这意味着点击标签打开/关闭复选框）？
方法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属性的值相同。 缺席时，被定义的标签与元素的内容相关联。
要隐式地将标签与另一个控件相关联， 控件元素必须位于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>只要确保标签与输入相关联即可。
<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嵌入到应用程序中时才有用。
<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，+它的要点
链接地址: http://www.djcxy.com/p/6227.html