1216

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

Improve this question
0

12 Answers 12

Reset to default
2270

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Love 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
@Wesley. getbootstrap.com/css/#forms - don't wrap inputs with <label> if makes things harder for mobile responsiveness
@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.
@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.
As 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.
|
63

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>
Improve this answer

6 Comments

I'm confused by the fact that you gave the two checkboxes the same name, and different values. Is that on purpose?
@LarsH — Yes, that is how you create checkbox groups.
Thanks. I was looking at w3.org/wiki/HTML/Elements/input/checkbox and it wasn't helpful in that regard.
With 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: 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 be bar and $_POST['foo'][1] might be baz (if both are checked).
|
15

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

Demo:http://codepen.io/mrmoje/pen/oteLl, + The gist of it

Improve this answer

4 Comments

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
Downvoted. While it's possible, it's a bad way - doesn't work on many browsers, not good for accessibility.
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>
The "it works on Webkit/Blink" smells like a bug using ( stackoverflow.com/questions/2587669/… ) so it may stop working at anytime.
9 
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Improve this answer

Comments

4 

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>

Improve this answer

Comments

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

1 Comment

Since 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 the for and id attributes, since these two are related, whereas name is not (it is stil mandatory to be included I believe though).
2

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>
Improve this answer

Comments

2

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>
Improve this answer

1 Comment

You may ommit the for and id attributes in your example, since the label tag only has one input element inside it.
1 
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Improve this answer

Comments

0

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

Improve this answer

Comments

-3

In Angular material label with checkbox

<mat-checkbox>Check me!</mat-checkbox>
Improve this answer

Comments

-9

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

2 Comments

Not necessary to use JavaScript to do this. It's built into HTML.
@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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.