Submit your widget
HomeFormjQuery : Checkbox & Table

jQuery : Checkbox & Table

Created 13 years ago   Views 20172   downloads 3321    Author webstuffshare
jQuery : Checkbox & Table
View DemoDownload
119
Share |

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.

You might also like