Click table rows to select checkbox using jQuery

checkbox, html-table, jquery

Solution

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

Problem

Original source

Related problems

• Click event doesn't fire for table rows added dynamically