Select/Unselect multiple HTML Table rows using Checkbox in JQuery

In this post i am going to show you select/unselect multiple table rows using simple jquery code. I have added a checkbox in the  header row as well as in every other row as well. When header row is checked we want all the other  rows to be  checked and the opposite should happen when header row is unchecked. Similarly when we check all the rows one by one the header row should automatically get checked.

 

Select/Unselect multiple html table rows using checkbox in jquery

Select/Unselect multiple html table rows using checkbox in jquery

When all the rows are selected and we unselect a row(not the header row) then the header row should automatically get unchecked. We will create two simple functions one for the header row onchange event and the other for the content rows change event. Below is the simple code to implement this:
JQuery Code:

CSS Code:

HTML Code:

This code is tested in latest versions of Firefox , Chrome , Safari , Opera.
Download Source

If you have any queries don’t hesitate to leave a comment i will get back to you as soon as possible. And dont forget to share it with your friends. Till next time HAPPY CODING!

8 thoughts on “Select/Unselect multiple HTML Table rows using Checkbox in JQuery

  1. eebest8

    I have learn several excellent stuff here. Certainly price bookmarking for revisiting. I wonder how a lot attempt you set to create this sort of excellent informative web site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge