jQuery toggle checkbox when parent is clicked

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"));
        }
    });
});

​

Answer 2

check the type of clicked element. Without this, you are trying to get an element that not exist.

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

Answer 3

The reason it behaves in this way is because the input is triggering the parent click event, at which point this becomes the checkbox, and not the clicked td, so .find("input[type=checkbox]") won't select anything, and therefore no action will be performed.

An alternative to the other answers would be to bind the click event to the input directly, and stop it from propagating, eg:

$("td.onoff > input").click(function(e) {
  e.stopPropagation();        
});

Here's a demo

Answer 4

Add the following:

$("td.onoff :checkbox").click(function(event) {
    event.stopPropagation();
});

This prevents the click event from bubbling up to the container when you click on the checkbox.

Answer 5

Use "for" attribute rather than any javascript function This will automatically work as it does by function: Just below html:

<tr class="row" >
        <td class="onoff" ><label for="check1"><input id="check1" type="checkbox" name="something[]" checked="checked" /></label></td>
    </tr>
    <tr class="row">
        <td class="onoff"><label for="check2"><input id="check2" type="checkbox" name="something[]" checked="checked" /></td>
    </tr>
    <tr class="row">
        <td class="onoff"><label for="check3"><input id="check3" type="checkbox" name="something[]" checked="checked" /></td>
 </tr>