Question

I have a table with each row containing a checkbox as well as some other cells. To make the entire row clickable so that it can be used to toggle the state of the checkbox I used this piece of code:

  $('#eoiTable tr').click(function(){
     var $checkbox = $(this).find('input[type=checkbox]');
     $checkbox.prop('checked', !$checkbox.is(':checked'));
  });

This works great for all cells in the row, except when I click directly on the checkbox itself. It re-toggles to its old state. I can understand what’s going on here, but how I can make sure that the table onclick event doesn’t work when you click on the checkbox itself?

Thanks a ton!

Answer 1

try adding something to stop the event from bubbling

$('#eoiTable tr input[type="checkbox"]').click(function(e) {
   e.stopPropagation();
});

edit: had the wrong type