Question

I have a div element containing a checkbox, when I click the div I want the checkbox to toggle.
I did this by assigning the following code to $(#div).click:

$(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"));

The problem now is that if the checkbox itself is clicked, the code above is still executed and thus the checkbox stays in the same state.
How would I fix this?

Answer 1

The event is bubbling up, you need to stop event propogation, one way is

$('#myDiv :checkbox').click(function(e){
    e.stopPropagation();
});

Edit

In case you want to handle the event at div use this

$('div').click(function(e) {

    // check if the event was triggered by an input box
    if (e.target.nodeName != "INPUT") {
        $(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked"));
    }

    // do something else 
    alert('hey there!');

});​

Demo – http://jsfiddle.net/QnbhX/