jQuery Plugin For Multiple Table Row Selection

File Size: 3.53 KB
Views Total: 8342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Multiple Table Row Selection

A lightweight jQuery plugin which enables you to select multiple table rows with checkboxes. Also provides a functionality which allows you to (un)check all the rows in a Html table.

See also:

How to use it:

1. Load jQuery library and the jquery.selectable-list.js at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.selectable-list.js"></script>

2. Add checkboxes to your table rows.

<table class="table">
  <tr>
    <td><input type="checkbox" id="checkall" title="Select all"/></td>
    <th>From</th>
    <th>To</th>
    <th>Subject</th>
    <th>Date</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Abbot &lt;[email protected]&gt;</td>
    <td>[email protected]</td>
    <td>Booking confirmation #389629244</td>
    <td>May 25, 2011</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Addison Begoat &lt;[email protected]&gt;</td>
    <td>[email protected]</td>
    <td>FW: Associate advice</td>
    <td>May 7, 2011</td>
  </tr>
</table>

3. Call the plugin on the table and done.

$(function(){
  $("table").selectableList();
});

Change log:

2015-06-26

  • labeled checkbox fix

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