Create table with checkbox using Bootstrap

Design a table with Check box in Bootstrap

In this tutorial, we are going to create the basic table with check box using bootstrap. Bootstrap has a set of table classes for creating the responsive table. It includes the classes to style any table.

ClassDescription
.table add basic styles for the data inside the <table> tag
.table-borderedadd borders on all side of the table and cells
.table-condensed Makes table more compact by cutting cell padding in half
.table-hover Add hover effects ( (grey background color) on the table rows
.table-stripedAdd zebra-striping to any table row within the <tbody>

Step 1: Create a table in Bootstrap

Lets create the table as below. Then we can add the check box on the table rows.

Create table in bootstrap
Create table in bootstrap

Step 2 : Add check box to a table

To show the check box before the cell data, we are defining those fields as check box using the below code

Adding check box to Bootstrap table
Adding check box to Bootstrap table

Step 3 : Create select all and clear button for check box

If we have more options in the check box list, we need to add the select all and clear option to improve the user experience.

  • Select all – To select all the check boxes
  • Clear – To reset all the check boxes.

Now its time to add the functions to make the action of select and reset the check boxes using buttons. Using the onclick() event of Javascript, we can call our custom functions to complete this functionality.

Javascript function to select and reset all check boxes
Javascript function to select and reset all check boxes

Custom Javascript functions – checkAll() & uncheckAll()

When user clicks the Select All button, it calls the checkAll function to set the checked property as true for all the check boxes. Similary if user clicks the clear button, it calls the uncheckAll function to reset the checked property as false for all the check boxes.

Let put all code together to show our table with check boxes.

Complete code:

Table with check box options in Bootstrap
Table with check box options in Bootstrap