Table Rows Selection With Checkboxes Inspired by Gmail

by

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.

HTML

Here is the sample HTML table where need to enable select/unselect multiple table rows with checkboxes


Choose your favorite Star Wars movie(s) by clicking on the checkboxes ...



NĀ°
Movie
Date






IV
A New Hope
25 May 1977




V
The Empire Strikes Back
21 May 1980




VI
Return of the Jedi
25 May 1983




I
The Phantom Menace
19 May 1999




II
Attack of the Clones
16 May 2002




III
Revenge of the Sith
19 May 2005



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.


Published by Rohit