如何使用可点击的标签创buildHTMLcheckbox
如何创build一个可点击标签的HTMLcheckbox（这意味着点击标签打开/closurescheckbox）？
方法1：包装标签标签
将checkbox包裹在label标签中：
<label><input type="checkbox" name="checkbox" value="value">Text</label>
方法2：使用for属性
使用for属性（匹配checkboxid ）：
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"> <label for="checkbox_id">Text</label>
注意 ：页面上的ID必须是唯一的！
说明
由于其他答案没有提及它，一个标签最多可以包含1个input并省略for属性，并假定它是用于input的。
摘自w3.org （我的重点）：
[for属性]明确地将正在定义的标签与另一个控件相关联。 如果存在，则此属性的值必须与同一文档中某个其他控件的id属性的值相同。 当不存在时，被定义的标签与元素的内容相关联。
要隐式地将标签与另一个控件关联， 控件元素必须位于LABEL元素的内容中 。 在这种情况下，LABEL可能只包含一个控制元素。 标签本身可以位于相关控制之前或之后。
使用这种方法有以下优点：
-
不需要为每个checkbox分配一个
id（太棒了！）。 -
不需要在
<label>使用额外的属性。 -
input的可点击区域也是标签的可点击区域，所以没有两个单独的地方可以控制checkbox – 只有一个，不pipe是多less分开的
<input>和实际的标签文本，不pipe是什么types的你申请的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>
只要确保标签与input相关联即可。
<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伪元素从你的所有checkbox的值属性（分别）中挑选和显示你的标签。
编辑：这将只适用于基于webkit和闪烁的浏览器（Chrome（ium），Safari，Opera ….），因此大多数移动浏览器。 没有Firefox或IE支持。
这可能只有在将webkit / blinkembedded到应用程序时才有用。
<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="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 />
它也起作用：
<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" />
这应该可以帮助你： 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>
使用label元素和for属性将其与checkbox相关联：
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
用这个
<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'); }); });
