Gmail-style Table Rows Selection With Checkboxes - jQuery Selectr

File Size: 32.7 KB
Views Total: 4958
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Gmail-style Table Rows Selection With Checkboxes - jQuery Selectr

Selectr is a jQuery plugin that enables you to select/unselect multiple table rows with checkboxes. Inspired by Google Gmail.

When applying this jQuery plugin to a table, a column is appended to each row allowing the user to check or uncheck a certain number of rows by click.

All the ids of the checked rows are stored in a jQuery data object that is easy to access by any jQuery function.

More features:

  • Custom styles for highlighted rows.
  • Right/left positions.
  • Limits the number of checkable rows.
  • Displays a counter for checked rows.
  • Allows to set pre-check rows.
  • Tri-state checkbox.

How to use it:

1. Load the latest version of the jQuery Selectr plugin after jQuery library.

<script src="" 
<script src="jquery.selectr.js"></script>

2. Just call the function selectr() on the target HTML table and done.

<table id="table-demo">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <td>A New Hope</td>
      <td>25 May 1977</td>
      <td>The Empire Strikes Back</td>
      <td>21 May 1980</td>
      <td>Return of the Jedi</td>
      <td>25 May 1983</td>

3. Customize the background color of the checked table row(s).

  highlight : "highlighted"
.highlighted {
  /* CSS styles here */

4. Set the position of the checkboxes.

  position: "right", // or left

5. Create a counter to display the count of checked rows. You need to create a tfoot in your HTML table in order to display the counter.

  count: true

6. Set the maximum number of table rows to be checkable.

  checkMax: 5, // 0 = unlimited
}, function() {
  // called when reaching the limit

7. Set the pre-checked table rows.

  list: [2,4,5]

8. More default configuration options.

  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: []

This awesome jQuery plugin is developed by Neofyt. For more Advanced Usages, please check the demo page or visit the official website.