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

Question

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

Answer 1

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>

Answer 2

If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

The for attribute on the label element links to the id attribute on the input element and the browser does the rest.

This has been testing to work in:

• IE6
• IE7
• Firefox