How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?
-
4Making checkbox and radio labels clickable - Have you read this? – John Jun 9 '11 at 13:36
Method 1: Wrap Label Tag
Wrap the checkbox within a label
tag:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Method 2: Use the for
Attribute
Use the for
attribute (match the checkbox id
):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
NOTE: ID must be unique on the page!
Explanation
Since the other answers don't mention it, a label can include up to 1 input and omit the for
attribute, and it will be assumed that it is for the input within it.
Excerpt from w3.org (with my emphasis):
[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.
Using this method has some advantages over for
:
No need to assign an
id
to every checkbox (great!).No need to use the extra attribute in the
<label>
.The input's clickable area is also the label's clickable area, so there aren't two separate places to click that can control the checkbox - only one, no matter how far apart the
<input>
and actual label text are, and no matter what kind of CSS you apply to it.
Demo with some 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>
-
10Love it, but please edit again. This is only good for checkboxes. Let's not encourage folks to wrap their other inputs with labels, because that breaks the grid system and mobile responsiveness will be harder to come by – John Nov 6 '14 at 7:59
-
Can I use the
for
attribute in a textbox? I need to have a normal checkbox with data that needs to be input by user. If that is possible, how will the data be accessible to server whenpost
ed? – Oxwivi Jan 7 '15 at 10:12 -
15@John that is a markup guide specifically for bootstrap. If you aren't using a framework, or are using a different one, it should be completely fine. Thanks for the reply. – Wesley Murch Jul 31 '15 at 18:23
-
3@John. On the page you link, bootstrap examples all wrap checkbox with label, I don not see any warnings as you indicate at all, perhaps its no longer relevant to the latest bootstrap. – user2144406 Aug 12 '16 at 16:06
-
2As I learned today, don't mix Method 1 and Method 2. If you wrap the checkbox in a label AND include the for, then clicking on the label won't trigger the checkbox. – BBlake Dec 8 '16 at 16:05
Just make sure the label is associated with the input.
<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>
-
1I'm confused by the fact that you gave the two checkboxes the same name, and different values. Is that on purpose? – LarsH Aug 22 '13 at 14:39
-
2
-
Thanks. I was looking at w3.org/wiki/HTML/Elements/input/checkbox and it wasn't helpful in that regard. – LarsH Aug 22 '13 at 14:42
-
2With PHP, wont that make $_POST['foo'] always have one of the two values maximum at one time? Even if both checked. What's a checkbox group? – JeromeJ Jun 9 '14 at 9:27
-
2@JeromeJ: For php to handle it correctly, you have to add square brackets to the name, e.g:
<input type="checkbox" name="foo[]" value="bar" ...>
. This will give you an array which contains the values of all the checked boxes (that have this name). For example$_POST['foo'][0]
might bebar
and$_POST['foo'][1]
might bebaz
(if both are checked). – Levit Mar 18 '15 at 9:32
You could also use CSS pseudo elements to pick and display your labels from all your checkbox's value attributes (respectively).
Edit: This will only work with webkit and blink based browsers (Chrome(ium), Safari, Opera....) and thus most mobile browsers. No Firefox or IE support here.
This may only be useful when embedding webkit/blink onto your apps.
<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>
All pseudo element labels will be clickable.
-
2
-
3
-
True. Gecko and Trident and gecko do not seem to like this. This will work with Webkit and Blink only. I'll update the answer – moje Sep 24 '14 at 3:14
-
3Downvoted. While it's possible, it's a bad way - doesn't work on many browsers, not good for accessibility. – James Billingham Feb 20 '15 at 20:01
-
Compatibility issues aside, this solution isn't as semantic as the top answer because there is no direct association in markup between the <label> and the <input> – Evin Ugur May 20 '15 at 16:25
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
-
1Since it may be confusing to some readers, you should change the
name
attribute's value to something different than the value that is present in thefor
andid
attributes, since these two are related, whereasname
is not (it is stil mandatory to be included I believe though). – Dzhuneyt Apr 2 '13 at 14:42
It works too :
<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>
-
-
You may ommit the
for
andid
attributes in your example, since thelabel
tag only has one input element inside it. – Dzhuneyt Apr 2 '13 at 14:41
This should help you: W3Schools - Labels
<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>
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Use the label
element, and the for
attribute to associate it with the checkbox:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
Use this
<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');
});
});
-
8
-
4@LasseBunk, if only it was just JavaScript, but the whole jQuery library is required for this to work. Let's see if someone can come up with an Angular 2 solution. – this.lau_ Jan 2 '17 at 15:21
protected by Tats_innit Dec 29 '14 at 21:04
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?