如何创建带有可点击标签的复选框？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

如何创建带有可单击标签的HTML复选框（这意味着单击标签可以打开/关闭该复选框）？

---

#1楼

它也可以工作：

<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>

---

#2楼

您还可以使用CSS伪元素分别从复选框的所有value属性中选择并显示标签。
编辑：这仅适用于基于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>

所有伪元素标签将是可单击的。

演示： http : //codepen.io/mrmoje/pen/oteLl，+ 要点

---

#3楼

用这个

<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');
    });
});

---

#4楼

只需确保标签与输入关联即可。

<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>

---

#5楼

方法1：包装标签标签

将复选框包装在label标签内：

<label><input type="checkbox" name="checkbox" value="value">Text</label>

方法2：使用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属性的值相同。 如果不存在，则定义的标签与元素的内容相关联。

要将标签与另一个控件隐式关联， control元素必须在LABEL元素的内容之内 。 在这种情况下，LABEL只能包含一个控制元素。 标签本身可以位于相关控件之前或之后。

使用这种方法比有一定的优势for ：

• 无需为每个复选框分配一个id （太好了！）。

• 无需使用<label>的extra属性。

• 输入的可单击区域也是标签的可单击区域，因此没有两个单独的可控制复选框的单击位置-无论<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>

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3154701