Html 如何创建带有可点击标签的复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6293588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a checkbox with a clickable label?
提问by laurent
How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?
如何创建带有可点击标签的 HTML 复选框（这意味着点击标签会打开/关闭复选框）？
回答by Wesley Murch
Method 1: Wrap Label Tag
方法一：包裹标签
Wrap the checkbox within a labeltag:
将复选框包裹在label标签中：
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Method 2: Use the forAttribute
方法二：使用for属性
Use the forattribute (match the checkbox id):
使用for属性（匹配复选框id）：
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
NOTE: ID must be unique on the page!
注意：ID 在页面上必须是唯一的！
Explanation
解释
Since the other answers don't mention it, a label can include up to 1 input and omit the forattribute, and it will be assumed that it is for the input within it.
由于其他答案没有提到它，一个标签最多可以包含 1 个输入并省略该for属性，并且将假定它用于其中的输入。
Excerpt from w3.org(with my emphasis):
摘自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 onecontrol element. The label itself may be positioned before or after the associated control.
[for 属性] 显式地将定义的标签与另一个控件相关联。当存在时，此属性的值必须与同一文档中其他控件的 id 属性值相同。如果不存在，则定义的标签与元素的内容相关联。
要将标签与另一个控件隐式关联，控件元素必须在 LABEL 元素的内容内。在这种情况下，LABEL 可能只包含一个控制元素。标签本身可以位于相关控件之前或之后。
Using this method has some advantages over for:
使用这种方法有一些优点for：
No need to assign an
idto every checkbox (great!).No need to use the extra attribute in the
<label>.The input's clickable area is also the label's clickable area, so there aren't two separate places to click that can control the checkbox - only one, no matter how far apart the
<input>and actual label text are, and no matter what kind of CSS you apply to it.
无需
id为每个复选框分配一个（太棒了！）。无需在
<label>.输入的可点击区域也是标签的可点击区域，因此没有两个单独的点击位置可以控制复选框 - 只有一个，无论
<input>标签文本与实际标签文本相距多远，也无论您使用哪种 CSS适用于它。
Demo with some 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>回答by Quentin
Just make sure the label is associated with the 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>
回答by mrmoje
You could also use CSS pseudo elements to pick and display your labels from all your checkbox's value attributes (respectively).
Edit:This will only work with webkit and blink based browsers (Chrome(ium), Safari, Opera....) and thus most mobile browsers. No Firefoxor IE support here.
This may only be useful when embedding webkit/blink onto your apps.
您还可以使用 CSS 伪元素从所有复选框的值属性（分别）中选择和显示您的标签。
编辑：这仅适用于基于 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>
All pseudo element labels will be clickable.
所有伪元素标签都可以点击。
回答by Dave Kiss
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
回答by ShaneBlake
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
回答by Mystral
It works too :
它也有效：
<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>
回答by John
This should help you: W3Schools - Labels
这应该对您有所帮助：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>
回答by Christopher Armstrong
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
回答by James Allardice
Use the labelelement, and the forattribute to associate it with the checkbox:
使用label元素和for属性将其与复选框关联：
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
回答by Arunkumar Ramasamy
In Angular material label with checkbox
在带有复选框的角度材料标签中
<mat-checkbox>Check me!</mat-checkbox>
