scan4jobs

How to make a checkbox toggle from clicking on the text label?

Answered
0
0

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 to make a checkbox toggle from clicking on the text label ?

  • You must to post comments
Best Answer
1
0

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
  • You must to post comments
Best Answer
0
0

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>
  • You must to post comments
Showing 2 results
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Website