HTML checkbox onclick called in Javascript

Question

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>

This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:

function toggleCheckbox(id) {
    document.getElementById(id).checked = !document.getElementById(id).checked;
}

However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this? I tried to add the onclick of the input to the onclick of the label but that doesn't work.

Any suggestions/solutions would be wonderful.

Solution 1

How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> 

function toggleCheckbox(element)
 {
   element.checked = !element.checked;
 }

This will additionally catch users using a keyboard to toggle the check box, something onclick would not.

Solution 2

Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right? Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label

<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
  <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
  Select All
</label>

Comments

[Andy E]

Using the for attribute is as good as putting the input inside the label, but it does reduce the markup a little bit. +1 for onchange and thinking of us lowly keyboard users :-)

[Gert Grenander]

@Andy E - In theory yes, in reality no. IE 6 and IE 7 doesn't handle implicit labels correctly (evotech.net/blog/2009/09/ie6ie7-implicit-label-bug). Explicit labels are to be preferred.

[Craig]

Doing this results in the checkbox never being checked nor are any of the checkboxes. <label for="check_all_1" onclick="selectAll(document.wizard_form, this);"> <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All"> Select All </label> You are correct I want the selectAll() to execute when the label is pressed.

[Craig]

I want to make this change small as it will be done in dozens of locations on a every old system that doesn't exactly make large scale changes easy.

[Craig]

If putting the label on the outside makes it autoclickable then the toggleCheckbox is not needed anymore. However the selectAll is, which if I replace the toggleCheckbox(this) for the selectAll in your example it does not work at all. However I do like having the labels on the outside and using onchange instead.

[Craig]

Fixed it, did this, forgot that this should be the id name for label section.

[rownage]

The dozens of locations part would be easily covered by this, as jQuery is designed for functionality across large files and systems (as are most scripting languages). But if you think your system is too old to make a change like this, then I guess I won't be of much use in this case. If you've never used jQuery, though, I suggest you take a look when you have time...it's great for handling behaviors such as this.

[Unicron]

facepalm I didn't realize at the time I wrote this that the toggle function was to toggle the actual element :)

[Andy E]

@Gert G: Indeed, I had forgotten about that bug even though I was quite familiar with it when Windows Vista was first released with IE 7/Windows Desktop Gadgets. I remember just using explicit labels in the settings dialogs to avoid the problem.

[Gert Grenander]

@Andy E - Being in an environment that is heavy on accessibility and backwards compatibility (yes, we're supposed to support IE6 for a while longer), we must use explicit labels due to these bugs.