How do i make a checkbox fire a function ?

Question

I have a checkbox inside a <label> and i want that checkbox, when checked or unchecked, to trigger a function. I attached a onchange trigger to the checkbox but in IE6 the trigger only fires after the focus is turned away from the checkbox, while in FF3 and Chrome it fires right away. I removed the onchange trigger and attached a onclick trigger to the <label> but now the trigger fires twice when the label is clicked once (does enyone know why?)...

My question is: how can i make the checkbox fire a function when it is checked or unchecked by a click on it or on it's label.

Thanks.

Answer 1

You probably need to turn on the autopostback property:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.autopostback.aspx

           <asp:CheckBox id="checkbox1" runat="server"
                AutoPostBack="True"
                Text="Include 8.6% sales tax"
                TextAlign="Right"
                OnCheckedChanged="Check_Clicked"/>

Answer 2

Assuming you don't want a fancy ASP / JQuery solution, just attaching the function to the onClick of the checkbox itself should work fine.

(Of course, you'll need to inspect the current state of the checkbox in the function if you want to have the function behave differently based on if the checkbox is checked or not.)

Answer 3

As "Electrons_Ahoy" says, you should be able to simply attach an onclick handler to the checkbox element. This handler should also get called when the user clicks on the label instead of the checkbox.

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>

JavaScript:

document.getElementById("myCheckbox").onclick = function() {
    if (this.checked) {
     alert("Checkbox was checked.");
    }
    else {
     alert("Checkbox wasn't checked.");
    }
};

The above code seems to work correctly in Safari 4 and Firefox 3 (I'm not sure how it would work in IE).

Steve

Answer 4

not sure if using Prototype is an option for you, but if so you'd do it this way (this assumes Prototype 1.6. Code written against earlier versions will be slightly different):

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>

JS:

$('myCheckbox').observe('click', function(cbox)
    {
        var cbox = $('myCheckbox');
        //do work in here.
        //cbox is the DOM element that represents your checkbox
    }
);

Doing it this way is slightly nicer than the "naked" JS approach (in my opinion), and it's a bit safer too.

Answer 5

Thank you for all your responses.

@Electrons_Ahoy and @Steve: You are tight. My problem was that i was putting the checkbox inside the labe, so i did the folowing: I took the checkbox outside the label, put the onclick trigger on the checkbox only and it works fine.

I also figured out why the trgger fired twice when the checkbox was inside the label and the onclick trigger was on the label : It was because when i clicked the label a click on the checkbox was simulated and the checkbox being inside the label the click was simulated on the label, duuuuuhhh :)