如何创建一个带有可点击标签的HTML复选框(这意味着单击标签将复选框打开/关闭)?


当前回答

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

其他回答

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

使用label元素和for属性将其与复选框关联:

<label for</label>=“myCheckbox”>某些复选框<input type=“checkbox” id=“myCheckbox” />

在Angular material中用复选框标记

<mat-checkbox>Check me!</mat-checkbox>
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

您还可以使用CSS伪元素(分别)从所有复选框的值属性中选择和显示标签。 编辑:这将只适用于webkit和闪烁基于浏览器(Chrome(ium), Safari, Opera....),因此大多数移动浏览器。这里不支持Firefox或IE。 这可能只在嵌入webkit/blink到你的应用程序时有用。

所有的伪元素标签都是可点击的。

{后(type =复选框): 内容:attr(价值); 边距:-3px 15px; vertical-align:最高; 空白:nowrap;} 显示:inline-block; } <input type="checkbox" value="My checkbox label value" />

演示:http://codepen。io/mrmoje/pen/oteLl, +它的要点