Question

I run some validation on my form when a checkbox is clicked, which works as intended.

$('#ilikeicecream').click(function(){
     runValidation();
});

The checkbox also has a label element, so I need to check for that as well. My first instinct was to do the following:

$('#ilikeicecream-label').click(function(){
     runValidation();
});

The problem is that the checkbox has not been checked at this point so validation does not work as intended. How can I get around this?

Answer 1

Use change():

$('#ilikeicecream').change(function(){
     runValidation();
});

For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.

---

I’ve tested in jsFiddle with the following code. I’m unable to provide a link however as jsfiddle is currently down.

<label for="ilikeicecream">sdsd</label><input id="ilikeicecream" type="checkbox" />

$('#ilikeicecream').change(function(){
     alert("test");
});

---

If this is not working, perhaps you have not specified the for attribute in your label to match the input.