Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin
In this post, I created a simple jquery table check all plugin for your table with a checkbox check all features or having multiple actions like muli-delete. In my current project, I have a repetitive task that can multi-delete rows from the selected rows. So I decided to create a simple plugin for it. This is fast and lightweight hopefully it could be useful to your project also.
Step 1: Installation
To install kindly run the following git clone command:
git clone https://github.com/codeanddeploy/Jquery-Table-Check-All-Plugin.git Step 2: Default Configuration
See the following sample code configuration:
$( '#your_table_id_here' ).TableCheckAll(); As you can see I initialized the TableCheckAll() function with the target table ID.
Default Settings:
checkAllCheckboxClass: '.check-all' = class for a check all checkbox in your table heading column; if you did not set a custom class for your check all checkbox then you must add ".check-all" class to your check all checkbox.
checkboxClass: '.check' = class for row check box in your table; if you did not set a custom class for your row check box then you must add ".check" to your row check box.
Step 3: Sample Code Default Configuration
To see it in action for our default configuration kindly see the following code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Jquery Table Check All Plugin - codeanddeploy.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="dist/TableCheckAll.js"></script> <script type="text/javascript"> $(document).ready(function() { $( '#users-table' ).TableCheckAll(); }); </script> </head> <body> <div class="container mt-5"> <table class="table table-striped" id="users-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all"></th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Website</th> </tr> </thead> <tbody> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>Ronard</td> <td>Cauba</td> <td>https://codeanddeploy.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>Juan</td> <td>Dela Cruz</td> <td>https://google.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>John</td> <td>Doe</td> <td>https://google.com</td> </tr> </tbody> </table> </div> </body> </html> 
After unchecked the first row.
Step 4: With Custom Configuration
Now let's have a custom configuration for our TableCheckAll plugin. In this example, we changed the class name of checkAllCheckBoxClass to ".check-all-users" and checkboxClass to ".check-user".
Then we must add the ".check-all-users" class also to your check all checkbox element and to our row checkbox class to ".check-user".
Here is the jquery code below:
$(document).ready(function() { $( '#users-table' ).TableCheckAll({ checkAllCheckboxClass: '.check-all-users', checkboxClass: '.check-user' }); }); Here is the complete code below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Jquery Table Check All Plugin - codeanddeploy.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="dist/TableCheckAll.js"></script> <script type="text/javascript"> $(document).ready(function() { $( '#users-table' ).TableCheckAll({ checkAllCheckboxClass: '.check-all-users', checkboxClass: '.check-user' }); }); </script> </head> <body> <div class="container mt-5"> <table class="table table-striped" id="users-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all-users"></th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Website</th> </tr> </thead> <tbody> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>Ronard</td> <td>Cauba</td> <td>https://codeanddeploy.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>Juan</td> <td>Dela Cruz</td> <td>https://google.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>John</td> <td>Doe</td> <td>https://google.com</td> </tr> </tbody> </table> </div> </body> </html> Step 5: Multiple Tables in One Page
TableCheckAll plugin can support also multiple tables on one page. See the sample code below:
$(document).ready(function() { $( '#users-table' ).TableCheckAll({ checkAllCheckboxClass: '.check-all-users', checkboxClass: '.check-user' }); $( '#top-websites-table' ).TableCheckAll(); }); Here is the complete code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Jquery Table Check All Plugin - codeanddeploy.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="dist/TableCheckAll.js"></script> <script type="text/javascript"> $(document).ready(function() { $( '#users-table' ).TableCheckAll({ checkAllCheckboxClass: '.check-all-users', checkboxClass: '.check-user' }); $( '#top-websites-table' ).TableCheckAll(); }); </script> </head> <body> <div class="container mt-5"> <h3>Users</h3> <table class="table table-striped" id="users-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all-users"></th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Website</th> </tr> </thead> <tbody> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>Ronard</td> <td>Cauba</td> <td>https://codeanddeploy.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>Juan</td> <td>Dela Cruz</td> <td>https://google.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check-user"></th> <td>John</td> <td>Doe</td> <td>https://google.com</td> </tr> </tbody> </table> <br> <br> <br> <h3>Top Websites</h3> <table class="table table-striped" id="top-websites-table"> <thead> <tr> <th scope="col"><input type="checkbox" class="check-all"></th> <th scope="col">Name</th> <th scope="col">Domain</th> </tr> </thead> <tbody> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>Google</td> <td>https://google.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>Youtube</td> <td>https://youtube.com</td> </tr> <tr> <th scope="row"><input type="checkbox" class="check"></th> <td>Facebook</td> <td>https://facebook.com</td> </tr> </tbody> </table> </div> </body> </html> Result:
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin if you want to download this code.
Happy coding :)
Top comments (0)