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

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?

5.08.2008 11:51:16
Can you edit the original question? Currently, the highest-rated answer IS the best for the question, as worded. The accepted answer actually answers an update to the question, and I've modded appropriately (will reverse after edit).
Bobby Jack 8.10.2008 23:01:54
8 ОТВЕТОВ
РЕШЕНИЕ

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>

21
4.05.2018 09:11:50
It's better to put the checkbox outside the label.
MrFox 31.08.2009 17:21:39
@MrFox When using display:block the checkbox has to be inside the label jsfiddle.net/Flandre/sBCLv/1
Andre 6.06.2012 14:06:33

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
45
5.08.2008 12:09:18
Not useful if you are creating multiple rows that all have checkboxes because you would have to give each the same name and id as shown here.
AndroidDev 26.09.2017 07:33:37

You can wrap your checkbox in the label:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
2
5.08.2008 12:25:16

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>
3
5.08.2008 12:28:32

Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text! This does the job 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>

but unfortunately has lots of javascript that is effectively toggling twice.

-2
5.08.2008 12:34:27

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.

3
13.02.2009 01:11:36

this should work:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

if it doesnt, pleae corect me!

-1
7.02.2016 00:57:46
Improvement: box.checked = !check;. Avoids repetition, although the readability is a little compromised.
ranu 13.06.2017 20:12:55

You need to just wrap the checkbox in label tag just like this

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FIDDLE

or you can also use the for attribute of label and id of your checkbox like below

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FIDDLE

1
1.09.2015 12:10:03