53

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.

Improve this question

4 Answers 4

Reset to default
94

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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 :-)
@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.
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.
facepalm I didn't realize at the time I wrote this that the toggle function was to toggle the actual element :)
@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.
|
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>
Improve this answer

2 Comments

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.
Fixed it, did this, forgot that this should be the id name for label section.
1

jQuery has a function that can do this:

  1. include the following script in your head:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

    (or just download the jQuery.js file online and include it locally)

  2. use this script to toggle the check box when the input is clicked:

    var toggle = false;
$("#INPUTNAMEHERE").click(function() {
        $("input[type=checkbox]").attr("checked",!toggle);
        toggle = !toggle;
});

That should do what you want if I understood what you were trying to do.

Improve this answer

2 Comments

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

You can also extract the event code from the HTML, like this : 

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>

<script>
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.