Create Checkable Table Rows With jQuery - simple-checkbox-table
File Size: | 20.9 KB |
---|---|
Views Total: | 32420 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.