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

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.

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.

Related