Click table rows to select checkbox using jQuery

Solution 1:

In order to select the checkbox of a row inside the table, we will first check whether the type attribute of the element we are targetting is not a checkbox if it's not a checkbox than we will check all the checkboxes nested inside that table row.

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

Demo

If you want to highlight the table row on checkbox checked than we can use an if condition with is(":checked"), if yes than we find the closest tr element using .closest() and than we add class to it using addClass()

$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});

Demo

Solution 2:

This question was useful to me but I had an issue with the previous solution. If you click on a link in a table cell, it will trigger the checkbox toggle. I googled this and I saw a proposition to add a event.stopPropagation() on the links of the table, like this:

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

This solution was a bad idea because I had some jquery bootstrap popover on a link of the table...

So here is a solutions that fits me better. By the way as I'm using bootstrap 2.3, the highlight of the line is made by adding the "info" class to the tr. To use this code, you just need to add class="selectable" to the table tag.

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

You will probably want to be more specific with the test condition, for exemple if you have other inputs in the row.

Solution 3:

Triggering a click like many of the solutions provided above will cause the function to run twice. Update the prop value instead:

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

Link to jsfiddle example here

Solution 4:

Even though the accepted @Mr. Alien answer works great, it doesn't work in case you decide to add a new <tr> 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