如何使用可点击标签创建HTML复选框


How to create an HTML checkbox with a clickable label

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

相关讨论

方法1:包装标签标签

在label标记内包装复选框：

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

方法2：使用for属性

使用for属性(与复选框id匹配)：

1
2
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

注意：ID在页面上必须是唯一的！

解释

由于其他答案没有提到它，一个标签最多可以包含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.

使用这种方法比for有一些优点：

  • 不需要为每个复选框分配一个id(太好了！).

  • 不需要在中使用额外的属性。

  • 输入的可单击区域也是标签的可单击区域，因此没有两个单独的可单击位置来控制复选框-只有一个，无论和实际标签文本相距多远，也不管您应用的是哪种CSS。

使用一些CSS演示：

1
2
3
4
5
6
7
8
9
10
11
label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block;
}

label:hover {
 background:#eee;
 cursor:pointer;
}
1
2
3
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

相关讨论

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

1
2
3
4
5
6
7
8
9
<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和基于闪烁的浏览器(Chrome(ium)、Safari、Opera…)以及大多数移动浏览器。这里不支持火狐或IE。这可能只在将WebKit/Blink嵌入到应用程序时有用。

1
2
3
4
5
6
7
8
9
10
<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，+要点

相关讨论

1
2
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

它也是有效的：

1
2
3
4
<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>
相关讨论

1
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
相关讨论

这应该对你有帮助：W3学校-标签

1
2
3
4
5
6
7
<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>
1
2
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

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

用这个

1
2
3
4
5
6
7
8
9
10
11
<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');
    });
});
相关讨论