Question

I have a checkbox inside a table cell and I want to check it when I click on my cell (not only when I click on checkbox).

I’m using this code:

$('.check_it').click( function () {
    if ($(this).find('.my_checkbox_class').is(':checked')) {
        $(this).find('.my_checkbox_class').removeAttr('checked');
        checked_counter--;
    }
    else {
        $(this).find('.my_checkbox_class').attr('checked', 'checked');
        checked_counter++;
    }
});

It works fine, but when I’m clicking on my checkbox, this event gets fired too and my checked_counter variable gets wrong value – can someone tell me how to fix it?
I want to check checkbox by clicking it and by clicking it’s table cell.

Edit, here is my html:

<td class="check_it"><input type="checkbox" class="my_checkbox_class" /></td>

Answer 1

$('.my_checkbox_class').click(function(ev){
    ev.stopPropagation();
});

Should do the trick. This stops the event from bubbling up so it doesn’t reach the td and only the checkbox default behavior gets executed.