Home » Questions » Computers [ Ask a new question ]

How do I make a checkbox toggle from clicking on the text label as well?

How do I make a checkbox toggle from clicking on the text label as well?

"Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

How do I make a checkbox toggle from clicking on the text label as well?"

Asked by: Guest | Views: 121
Total answers/comments: 4
Guest [Entry]

"Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.

For example:

label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for=""test"">
A ticky box! <input type=""checkbox"" id=""test"" />
</label>
Run code snippetHide resultsExpand snippet"
Guest [Entry]

"Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.

For example:

label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for=""test"">
A ticky box! <input type=""checkbox"" id=""test"" />
</label>
Run code snippetHide resultsExpand snippet"
Guest [Entry]

"Ronnie,

If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:

<label for=""surname"">
Surname
<input type=""checkbox"" name=""surname"" id=""surname"" />
</label>"
Guest [Entry]

"As indicated by @Gatekiller and others, the correct solution is the <label> tag.

Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.

It is very frustrating to be faced with a form that reads ""Please select your shipping method, radio-button1, radio-button2, radio-button3"".

Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies."