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

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

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

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

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