How do I make a checkbox toggle from clicking the message tag too?

Checkboxes in HTML kinds do not have implied tags with them. Including a specific tag (some message) alongside it does not toggle the checkbox.

Just how do I make a checkbox toggle from clicking the message tag too?

2019-05-09 11:09:30
Source Share
Answers: 5

Set the CSS display building for the tag to be a block component and also usage that as opposed to your div - it maintains the semantic definition of a tag while permitting whatever styling you like.

As an example :

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
<label for="test">
  A ticky box! <input type="checkbox" id="test" />

2019-05-10 19:23:41

If you appropriately markup your HTML code, there is no demand for javascript. The adhering to code will certainly permit the customer to click the tag message to tick the checkbox.

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

The for feature on the tag component web links to the id feature on the input component and also the internet browser does the remainder.

This has actually been examining to operate in :

  • IE6
  • IE7
  • Firefox
2019-05-10 06:01:52

You can cover your checkbox in the tag :

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
2019-05-10 05:59:31


If you intended to confine the tag message and also checkbox inside a wrapper component, you can do the adhering to :

<label for="surname">
    <input type="checkbox" name="surname" id="surname" />
2019-05-10 05:56:02

Wrapping with the tag still does not permit clicking 'throughout package' - still simply on the message! This gets the job done for me :

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

yet however has great deals of javascript that is properly toggling two times.

2019-05-10 05:55:07