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

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

Answer 1

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

Answer 2

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>