Question

I have written a simple js function to toggle the checkbox on/off then the parent (in this case a TD) is clicked. This function works as expected when you click anywhere on the TD.

However when you click on the checkbox itself, nothing happens.
What I would like to know is why it does this and what’s the best work around?

I have a provided a jsfiddle to demo this.

And here is my js function:

$("td.onoff").click(function() {
    var objCheckbox = $(this).find("input[type=checkbox]");
    if( objCheckbox.length >= 1 ) {
        objCheckbox.prop("checked", !objCheckbox.prop("checked"));
    }
});

Thanks.

Answer 1

You need to by pass event code when source of event is not td with class onoff, You can do this way.

Live Demo

$(function() {
    $("td.onoff").click(function(event) {          
        if(event.target.className != 'onoff') return;
        var objCheckbox = $(this).find("input[type=checkbox]");
        if( objCheckbox.length >= 1 ) {
            objCheckbox.prop("checked", !objCheckbox.prop("checked"));
        }
    });
});

​