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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.selectr.js"></script>

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

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

$('#table-demo').selectr();

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

$('#table-demo').selectr({
  highlight : "highlighted"
});

.highlighted {
  /* CSS styles here */
}

4. Set the position of the checkboxes.

$('#table-demo').selectr({
  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.

$('#table-demo').selectr({
  count: true
});

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

$('#table-demo').selectr({
  checkMax: 5, // 0 = unlimited
}, function() {
  // called when reaching the limit
});

7. Set the pre-checked table rows.

$('#table-demo').selectr({
  list: [2,4,5]
});

8. More default configuration options.

$('#table-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: []
});

---

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