如何使用可点击的标签创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'); }); });