Today’s code snippet is how to automagically check/uncheck checkbox element by clicking a single row of a table using jQuery. Firstly we add click event on the table’s row, it will help us read click event on each row. Grab checkbox element on its row, check whether this checkbox was checked or not yet, then add checked or unchecked value on it.

$('table tr').click(function() {
 
 checkBox = $(this).children('td').children('input[type=checkbox]');
 
 if(checkBox.attr('checked'))
  checkBox.attr('checked', '');
 else
  checkBox.attr('checked', 'checked');
});

Now our row have functionality to check/uncheck checkbox element, but how about we add a little function to check/uncheck all checkbox in our table by clicking only one checkbox, here is the code :

$('.check-all').click(function() {
 
 checkBox = $('table tr').children('td').children('input[type=checkbox]');
 
 if($(this).attr('checked')) 
  checkBox.attr('checked', 'checked');
 else
  checkBox.attr('checked', '');  
});

We also can add another functionality such as delete checked row or etc.