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)?
12 Answers
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>
-
15Love 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– MaxNov 6, 2014 at 7:59
-
1@Wesley. getbootstrap.com/css/#forms - don't wrap inputs with <label> if makes things harder for mobile responsiveness– MaxJul 31, 2015 at 14:29
-
17@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. Jul 31, 2015 at 18:23
-
4@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. Aug 12, 2016 at 16:06
-
3As 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.– BBlakeDec 8, 2016 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?– LarsHAug 22, 2013 at 14:39
-
2
-
Thanks. I was looking at w3.org/wiki/HTML/Elements/input/checkbox and it wasn't helpful in that regard.– LarsHAug 22, 2013 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?– jeromejJun 9, 2014 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).– LeviteMar 18, 2015 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.
All pseudo element labels will be clickable.
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space: nowrap;
display: inline-block;
}
<input type="checkbox" value="My checkbox label value" />
-
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– mrmojeSep 24, 2014 at 3:14
-
7Downvoted. While it's possible, it's a bad way - doesn't work on many browsers, not good for accessibility. Feb 20, 2015 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>– deadboyMay 20, 2015 at 16:25
-
The "it works on Webkit/Blink" smells like a bug using ( stackoverflow.com/questions/2587669/… ) so it may stop working at anytime.– XenosSep 21, 2016 at 9:44
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
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>
<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).– DzhuneytApr 2, 2013 at 14:42
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>
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>
-
2You may ommit the
for
andid
attributes in your example, since thelabel
tag only has one input element inside it.– DzhuneytApr 2, 2013 at 14:41
<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');
});
});
-
10
-
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.– laurentJan 2, 2017 at 15:21