Create Checkable Table Rows With jQuery - simple-checkbox-table

simple-checkbox-table is a jQuery plugin to enhance the HTML table with selectable rows that allows the users to select multiple table rows with checkboxes.

How to use it:

1. Add checkboxes to the table rows as follows:

<tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>hoge</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>foo</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td><input type="checkbox" disabled></td>
    <td>bar</td>
    <td>[email protected]</td>
  </tr>
</tbody>

2. Add a 'CheckAll' checkbox to the table header that allows the users to select/unselect all child checkboxes.

<thead>
  <tr>
    <th><input type="checkbox"></th>
    <th>Name</th>
    <th>e-mail</th>
  </tr>
</thead>

3. Download the plugin and place the JavaScript jquery.simple-checkbox-table.min.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.simple-checkbox-table.min.js"></script>

4. Call the function on the HTML table and done.

$(document).ready(function(){
  $("table").simpleCheckboxTable();
});

5. Perform some actions when the checkbox is checked/unchecked.

$(document).ready(function(){
  $("table").simpleCheckboxTable({
    onCheckedStateChanged: function($checkbox) {
      // Do something
    }
  });
});

---

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