Selecting Tables Rows with Checkboxes using jQuery - tableCheckbox.js

tableCheckbox.js is a jQuery plugin adding checkboxes to your html table that allows the visitor to select single / multiple / all table row(s) by clicking.

See also:

• jQuery Plugin To Select Multiple Rows In A Table - multiselect
• jQuery Plugin For Multiple Table Row Selection
• jQuery Plugin For Multi-Selectable Table Rows - jTableCheckbox

How to use it:

1. Download and include the tableCheckbox.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.tableCheckbox.js"></script>

2. Add checkboxes to table rows.

<table>
  <thead>
    <th style="width:20px;"><input type="checkbox"></th>
    <th>Programming Languages</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>C</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Java</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>PHP</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>JavaScript</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>C++</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Python</td>
    </tr>
  </tbody>
</table>

3. Call the function on the table and done.

$('table').tableCheckbox();

4. Plugin's default settings.

$('table').tableCheckbox({

// The class that will be applied to selected rows.
selectedRowClass: 'warning',

// The selector used to find the checkboxes on the table. 
// You may customize this in order to match your table layout
//  if it differs from the assumed one.
checkboxSelector: 'td:first-of-type input[type="checkbox"],th:first-of-type input[type="checkbox"]',

// A callback that is used to determine wether a checkbox is selected or not.
isChecked: function($checkbox) {
  return $checkbox.is(':checked');
}

});

Change log:

2015-06-09

• switched "rowcount" to "rowCount"

2015-06-08

• implemented proposed events

---

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