Click table rows to select checkbox using jQuery

Question

As I didn\'t find any question asked before, on how to toggle checkbox on click of a table row, so I would like to share my approach to this...

Answer 1

Even though the accepted @Mr. Alien answer works great, it doesn't work in case you decide to add a new row dynamically with jQuery at some point.

I recommend to use a event delegation approach, which is just a slight modification of accepted answer.

Instead of:

... $('.record_table tr').click(function(event) { ...

use

... $('.record_table').on('click', 'tr', function(event) { ...

And the same for the highlighting, use:

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

More info here: Click event doesn't fire for table rows added dynamically