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.

http://stackoverflow.com/questions/1467228/click-toggle-with-jquery — GiantHornet, Nov 21 '12 at 09:04

score 5 · Accepted Answer · answered Nov 21 '12 at 09:05

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

score 1 · Answer 2 · answered Nov 21 '12 at 09:04

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

score 1 · Answer 3 · answered Nov 21 '12 at 09:11

1

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

answered Nov 21 '12 at 09:11

billyonecan

20,090
8
42
64

Thanks for the explanation, and nice solution too +1. Decided to use @Adil's solution though, did the job in one line and in this instance it's easier for me to manage my js file with his solution. – Adam Tomat Nov 21 '12 at 09:47

score 0 · Answer 4 · answered Nov 21 '12 at 09:11

0

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.

answered Nov 21 '12 at 09:11

Barmar

741,623
53
500
612

score 0 · Answer 5 · answered Nov 21 '12 at 09:15

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>

Nice alternative to js, unfortunately this project will require lots of various sized tables generated dynamically. It's easier to slap a class on a td rather than adding in extra mark-up and code to deal with unique identifiers. — Adam Tomat, Nov 21 '12 at 09:50

jQuery toggle checkbox when parent is clicked

5 Answers5