如何创建一个带有可点击标签的HTML复选框(这意味着单击标签会打开/关闭复选框)?
只需确保标签与输入相关联即可 .
<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>
<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 />
使用 label 元素和 for 属性将其与复选框关联:
label
for
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
这应该可以帮到你:W3Schools - Labels
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
将复选框包装在 label 标记内:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
使用 for 属性(匹配复选框 id ):
id
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"> <label for="checkbox_id">Text</label>
NOTE :页面上的ID必须是唯一的!
由于其他答案没有提到它,标签最多可以包含1个输入并省略 for 属性,并且假定它是用于其中的输入 .
摘自w3.org(我的重点):
[for属性]显式将正在定义的标签与另一个控件相关联 . 如果存在,则此属性的值必须与同一文档中某个其他控件的id属性的值相同 . 缺席时,定义的标签与元素的内容相关联 . 要隐式地将标签与另一个控件相关联,控制元素必须位于LABEL元素的内容中 . 在这种情况下,LABEL可能只包含一个控制元素 . 标签本身可以位于相关控件之前或之后 .
使用此方法比 for 有一些优势:
无需为每个复选框分配 id (太棒了!) .
无需使用 <label> 中的额外属性 .
<label>
输入's clickable area is also the label' s可点击区域,因此没有两个单独的位置可以控制复选框 - 只有一个,无论 <input> 和实际标签文本有多远,无论您应用什么类型的CSS它 .
<input>
用一些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>
<label for="my_checkbox">Check me</label> <input type="checkbox" name="my_checkbox" value="Car" />
它也有效:
<form> <label for="male"><input type="checkbox" name="male" id="male" />Male</label> <label for="female"><input type="checkbox" name="female" id="female" />Female</label> </form>
用这个
<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'); }); });
您还可以使用CSS伪元素从所有复选框的值属性中分别选择和显示标签 .Edit: 这只适用于基于webkit和blink的浏览器(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,The gist of it
10 回答
只需确保标签与输入相关联即可 .
使用
label
元素和for
属性将其与复选框关联:<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
这应该可以帮到你:W3Schools - Labels
方法1:包装标签
将复选框包装在
label
标记内:方法2:使用for属性
使用
for
属性(匹配复选框id
):NOTE :页面上的ID必须是唯一的!
解释
由于其他答案没有提到它,标签最多可以包含1个输入并省略
for
属性,并且假定它是用于其中的输入 .摘自w3.org(我的重点):
使用此方法比
for
有一些优势:无需为每个复选框分配
id
(太棒了!) .无需使用
<label>
中的额外属性 .输入's clickable area is also the label' s可点击区域,因此没有两个单独的位置可以控制复选框 - 只有一个,无论
<input>
和实际标签文本有多远,无论您应用什么类型的CSS它 .用一些CSS演示:
它也有效:
用这个
您还可以使用CSS伪元素从所有复选框的值属性中分别选择和显示标签 .
Edit: 这只适用于基于webkit和blink的浏览器(Chrome(ium),Safari,Opera ....),因此大多数移动浏览器都适用 . 这里没有Firefox或IE支持 .
这可能仅在将webkit / blink嵌入到您的应用程序时才有用 .
所有伪元素标签都是可点击的 .
演示:http://codepen.io/mrmoje/pen/oteLl,The gist of it