如何创建带有可单击标签的 HTML 复选框(这意味着单击标签可打开/关闭复选框)?
将复选框包含在
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 属性的值相同。 如果不存在,则定义的标签与元素的内容相关联。
要将标签与另一个控件隐式关联,控件元素必须位于 LABEL 元素的内容中。在这种情况下,LABEL 可能只包含one控制元素。标签本身可以位于关联控件之前或之后。
使用此方法比
for
有一些优点:
无需为每个复选框分配
id
(太棒了!)。
无需使用
<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>
您还可以使用 CSS 伪元素(分别)从所有复选框的值属性中选取和显示标签。
编辑: 这只适用于 webkit 和基于 Blink 的浏览器(Chrome(ium)、Safari、Opera...)以及大多数移动浏览器。这里不支持 Firefox 或 IE。
这可能仅在将 webkit/blink 嵌入到您的应用程序中时才有用。
所有伪元素标签都将是可点击的。
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space: nowrap;
display: inline-block;
}
<input type="checkbox" value="My checkbox label value" />
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
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="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
这应该对您有帮助: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>
它也有效:
<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>
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
使用
label
元素和 for
属性将其与复选框关联:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
在带有复选框的 Angular 材料标签中
<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');
});
});