Table Rows Selection With Checkboxes Inspired by Gmail
Here I am going to share simple jQuery plugin that enables you to select/unselect multiple table rows with checkboxes. When applying this jQuery plugin to a table, a column is appended to each row allowing the visitor to check or uncheck a certain number of rows in a global way or individually.
A certain number of options is provided allowing, for instance, to limit the number of checkable rows or to provide a callback function when the maximum number of checked rows is reached.
All the ids of the checked rows are stored in a jQuery data object accessible by any jQuery function you have eslewhere in your code.
Integrate Table Rows Selection With Checkboxes
Libraries
Include all the required plugins libraries with dependencies.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.selectr.js"></script> |
HTML
Here is the sample HTML table where need to enable select/unselect multiple table rows with checkboxes
<table id="demo"> <caption>Choose your favorite Star Wars movie(s) by clicking on the checkboxes ...</caption> <thead> <tr> <th>N°</th> <th>Movie</th> <th>Date</th> <th><input type="checkbox" class="selectr"></th></tr> </thead> <tbody> <tr class=""> <td>IV</td> <td>A New Hope</td> <td>25 May 1977</td> <td><input type="checkbox" class="selectr"></td></tr> <tr> <td>V</td> <td>The Empire Strikes Back</td> <td>21 May 1980</td> <td><input type="checkbox" class="selectr"></td></tr> <tr> <td>VI</td> <td>Return of the Jedi</td> <td>25 May 1983</td> <td><input type="checkbox" class="selectr"></td></tr> <tr> <td>I</td> <td>The Phantom Menace</td> <td>19 May 1999</td> <td><input type="checkbox" class="selectr"></td></tr> <tr> <td>II</td> <td>Attack of the Clones</td> <td>16 May 2002</td> <td><input type="checkbox" class="selectr"></td></tr> <tr> <td>III</td> <td>Revenge of the Sith</td> <td>19 May 2005</td> <td><input type="checkbox" class="selectr"></td></tr> </tbody> </table> |
JS
Call the very basic version of plugin with default settings.
$(function() { $('#demo').selectr(); }); |
Here is the list of options you can use to customize the table row election with checkboxes.
$(function() { $('#demo').selectr({ selectr : "selectr", selectrCount : "selectrCount", highlight : "highlighted", count: false, leadingZero: "", checkMax: 0, checkedList : "checkedList", lastChecked: "lastChecked", lastCheckedState: "lastCheckedState", callbackType: "immediate", position: "right", order: "", list: [] }); }); |
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.