CODEWITHSUNDEEP
htmlcheckboxclicklabel
laurent
laurent

Reputation: 90736

How to create a checkbox with a clickable label?

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

Upvotes: 1211

Views: 1042248

Answers (12)

No Results Found
No Results Found

Reputation: 102735

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>

Upvotes: 2259

mrmoje
mrmoje

Reputation: 3732

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

Upvotes: 15

Junaid khan
Junaid khan

Reputation: 142

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>

Upvotes: 4

Arunkumar Ramasamy
Arunkumar Ramasamy

Reputation: 771

In Angular material label with checkbox

<mat-checkbox>Check me!</mat-checkbox>

Upvotes: -3

Anni
Anni

Reputation: 33

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

Upvotes: -9

Mystral
Mystral

Reputation: 116

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>

Upvotes: 2

John
John

Reputation: 1296

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>

Upvotes: 2

Christopher Armstrong
Christopher Armstrong

Reputation: 7953

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Upvotes: 1

James Allardice
James Allardice

Reputation: 165941

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

Upvotes: 0

ShaneBlake
ShaneBlake

Reputation: 11096

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

Upvotes: 3

Dave Kiss
Dave Kiss

Reputation: 10487

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

Upvotes: 9

Quentin
Quentin

Reputation: 943099

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>

Upvotes: 62

Related Questions