How to create a checkbox with a clickable label

Question

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

User · Answer

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.

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

User · Answer

It works too     lt form gt       lt label for  male  gt  lt input type  checkbox  name  male  id  male    gt Male lt  label gt  lt br   gt       lt label for  female  gt  lt input type  checkbox  name  female  id  female    gt Female lt  label gt   lt  form gt

User · Answer

Just make sure the label is associated with the input    lt fieldset gt     lt legend gt What metasyntactic variables do you like  lt  legend gt      lt input type  checkbox  name  foo  value  bar  id  foo bar  gt     lt label for  foo bar  gt Bar lt  label gt      lt input type  checkbox  name  foo  value  baz  id  foo baz  gt     lt label for  foo baz  gt Baz lt  label gt   lt  fieldset gt

User · Answer

Use the label element  and the for attribute to associate it with the checkbox    lt label for  myCheckbox  gt Some checkbox lt  label gt   lt input type  checkbox  id  myCheckbox    gt

User · Answer

lt label for  vehicle  gt Type of Vehicle  lt  label gt   lt input type  checkbox  id  vehicle  name  vehicle  value  Bike    gt

User · Answer

lt label for  my checkbox  gt Check me lt  label gt   lt input type  checkbox  name  my checkbox  value  Car    gt

User · Answer

This should help you  W3Schools - Labels   lt form gt     lt label for  male  gt Male lt  label gt     lt input type  radio  name  sex  id  male    gt     lt br   gt     lt label for  female  gt Female lt  label gt     lt input type  radio  name  sex  id  female    gt   lt  form gt

User · Answer

In Angular material label with checkbox   lt mat-checkbox gt Check me  lt  mat-checkbox gt

User · Answer

lt label for  myInputID  gt myLabel lt  label gt  lt input type  checkbox  id  myInputID  name  myInputID   gt

User · Answer

Use this   lt input type  checkbox  name  checkbox  id  checkbox id  value  value  gt   lt label for  checkbox id  id  checkbox lbl  gt Text lt  label gt        checkbox lbl   click function         if     checkbox id   is   checked                checkbox id   removAttr  checked        else            checkbox id   attr  checked

User · Answer

Method 1  Wrap Label Tag Wrap the checkbox within a label tag   lt label gt  lt input type  quot checkbox quot  name  quot checkbox quot  value  quot value quot  gt Text lt  label gt   Method 2  Use the for Attribute Use the for attribute  match the checkbox id    lt input type  quot checkbox quot  name  quot checkbox quot  id  quot checkbox id quot  value  quot value quot  gt   lt label for  quot checkbox id quot  gt Text lt  label gt   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  lt label gt    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  lt input gt  and actual label text are  and no matter what kind of CSS you apply to it    Demo with some CSS   x000D   x000D  label    border 1px solid  ccc   padding 10px   margin 0 0 10px   display block      label hover    background  eee   cursor pointer    x000D   lt label gt  lt input type  checkbox    gt Option 1 lt  label gt   lt label gt  lt input type  checkbox    gt Option 2 lt  label gt   lt label gt  lt input type  checkbox    gt Option 3 lt  label gt  x000D   x000D   x000D

[html] How to create a checkbox with a clickable label?

Examples related to html

Examples related to checkbox

Examples related to click

Examples related to label