Answers:
将复选框包装在label
标签内:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
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>
只需确保标签与输入关联即可。
<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>
<input type="checkbox" name="foo[]" value="bar" ...>
。这会给你其中包含所有的数组中的值检查框(有此名)。例如,$_POST['foo'][0]
可能是bar
并且$_POST['foo'][1]
可能是baz
(如果两个都选中)。
您还可以使用CSS伪元素分别从复选框的所有value属性中选择并显示标签。
编辑:这仅适用于基于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>
所有伪元素标签将是可单击的。
这应该对您有帮助:W3Schools-标签
<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="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
在带有复选框的角材料标签中
<mat-checkbox>Check me!</mat-checkbox>
用这个
<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');
});
});