jQuery Toggle Checkbox state

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!

rkw · Accepted Answer · 2012-02-01 06:56:52Z

2

try adding something to stop the event from bubbling

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

edit: had the wrong type

answered Feb 1, 2012 at 6:56

rkw

7,2974 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subbu · Accepted Answer · 2012-02-01 07:04:30Z

0

You are selecting the row of the table which contain checkbox also. So to avoid the table onclick event fire when checkbox is checked exclude it from the selection like

$('#eoiTable tr + #eoiTable tr input:not("[type=checkbox]")')

not sure about this but try this method

answered Feb 1, 2012 at 7:04

Subbu

3,2995 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

jQuery Toggle Checkbox state

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related