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


Answers:


1914

方法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为每个复选框分配一个(太棒了!)。

  • 无需在中使用extra属性<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>


14
喜欢它,但请再次编辑。这仅适用于复选框。我们不要鼓励人们用标签来包装其他输入内容,因为这会破坏网格系统,并且移动响应能力将更难获得
Max

1
如果有人可以解释@John留下的评论,请这样做,因为对我而言这毫无意义。
Wesley Murch

16
@John是专门用于引导的标记指南。如果您不使用框架,或使用其他框架,则应该完全可以。谢谢回复。
Wesley Murch

3
@约翰。在您链接的页面上,引导程序示例全部带有标签的复选框被选中,我根本看不到您所指示的任何警告,也许它不再与最新的引导程序相关。
user2144406

2
正如我今天所了解的,不要将方法1和方法2混合使用。如果将复选框包装在标签中并包含for,那么单击标签将不会触发该复选框。
BBlake

50

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

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

1
我对您为两个复选框指定了相同的名称和不同的值感到困惑。那是故意的吗?
LarsH 2013年

2
@LarsH-是的,这就是创建复选框组的方式。
昆汀

谢谢。我当时在看w3.org/wiki/HTML/Elements/input/checkbox,在这方面没有帮助。
LarsH 2013年

2
使用PHP,会使$ _POST ['foo']总是一次具有两个最大值之一吗?即使都检查了。什么是复选框组?
jeromej 2014年

2
@JeromeJ:为了使php正确处理,必须在名称中添加方括号,例如:<input type="checkbox" name="foo[]" value="bar" ...>。这会给你其中包含所有的数组中的值检查框(有此名)。例如,$_POST['foo'][0]可能是bar并且$_POST['foo'][1]可能是baz(如果两个都选中)。
莱维特2015年

11

您还可以使用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,+ 它的要点


真正。壁虎和三叉戟和壁虎似乎不喜欢这样。这仅适用于Webkit和Blink。我将更新答案
mrmoje 2014年

3
不赞成投票。尽管有可能,但这是一种不好的方法-在许多浏览器上均不起作用,不利于可访问性。
James Billingham

除了兼容性问题,此解决方案的语义不如最佳答案,因为<label>和<input>之间的标记没有直接关联
Deadboy

“使用Webkit / Blink可以工作”闻起来像是使用(stackoverflow.com/questions/2587669/…)的错误,因此它可能随时停止工作。
Xenos

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

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

1
由于这可能会使某些读者感到困惑,因此您应该将name属性的值更改为与forand id属性中存在的值不同的值,因为这两个是相关的,而name并不是相关的(尽管如此,强制性包括在内) 。
Dzhuneyt

3

它也可以工作:

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

您可以在示例中省略forand id属性,因为label标记内部只有一个输入元素。
Dzhuneyt

2

这应该对您有帮助: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>


0

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

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />



-7

用这个

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

9
不需要使用JavaScript来执行此操作。它内置在HTML中。
Lasse Bunk 2015年

4
@LasseBunk,如果仅仅是JavaScript,则需要整个jQuery库才能起作用。让我们看看是否有人可以提出Angular 2解决方案。
劳伦特
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.