方法1:包装标签标签
将标签包裹在标签标签中:
Text
方法2:使用属性
使用for属性(匹配checkbox id):
Text
说明
由于其他答案没有提到它,一个标签可以包括多达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(太棒了!)。
>无需在中使用extra属性。
>输入的可点击区域也是标签的可点击区域,因此没有两个单独的可以控制复选框的地方,只有一个,不管和实际的标签文本,无论你使用什么样的CSS。