如何创建一个带有可点击标签的HTML复选框(这意味着单击标签将复选框打开/关闭)?
当前回答
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
其他回答
使用这个
<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');
});
});
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
标签{ 边框:1px实心#ccc; 填充:10 px; 边距:0 0 10px; 显示:块; ｝ 标签:{徘徊 背景:# eee; 光标:指针; ｝ <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" />
方法1:包装标签
将复选框包装在标签标签中:
<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(此处是我的重点):
[The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents. To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
使用这种方法有一些优点:
不需要为每个复选框分配id(太好了!) 不需要在<label>中使用额外的属性。 输入的可点击区域也是标签的可点击区域，所以没有两个独立的地方可以点击控制复选框-只有一个，无论<input>和实际的标签文本有多远，无论你应用什么类型的CSS。
演示一些CSS:
标签{ 边框:1px实心#ccc; 填充:10 px; 边距:0 0 10px; 显示:块; ｝ 标签:{徘徊 背景:# eee; 光标:指针; ｝ <label><input type="checkbox" />Option 1</label> <label><input type="checkbox" />Option 2</label> <label><input type="checkbox" />Option 3</label> .
