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.
Table Rows Selection With Checkboxes

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", // immediate - loaded
  position: "right", // left - right
  order: "", // by_click
  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.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.