Learn how to create jQuery Select all Checkboxes in Table Column. It is a very useful operation when you need to check all the records instead of a specific entire.
To develop this small functionality, we will use the “CheckAll” jQuery plugin. It is a lightweight and well-coded plugin that is easy to implement on any kind of website.
The input type checks and uncheck functionality basically require where you have to manage the large list of records. With the help of this small checking features, you can make your job easier for the users who want to perform an action.
One such example you have seen in the Gmail or WordPress admin dashboard where you can easily select all the list items by just one click.
By implementing the select all checkboxes functionality, the user can easily select/deselect all the list of items or records with just one checkbox.
Furthermore, this plugin can be highly customized with its available options and CSS.
Using the HTML table is very handy and useful because it can adapt to any style or design with the help of CSS. You can easily hold the different input types such as radio button, checkbox or a button.
In this tutorial, I show how you can implement the checkboxes in table column functionality with jQuery and JavaScript.
How to Create Select All Checkboxes In Table Column
The implementation of functionality requires to load the jQuery file into your web page. If you are already using the jQuery then you don’t need to add it.
So let’s add the file before closing the head tag to get started with functionality.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>After that, you need to include the checkAll plugin JavaScript file into your HTML document.
<script src="js/checkAll.min.js"></script>Let’s Create HTML markup and we will use the table an element to arrange the content better way. We will place some checkboxes on it.
<table>
<thead>
<tr>
<th>
<label class="checkbox">
<input type="checkbox" class="checkAll">
<span class="checkbox-label">checkAll</span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox">
<input type="checkbox" name="checkGroup" value="1">
<span class="checkbox-label">checkbox1</span>
</label>
</td>
</tr>
...
...
...
</tbody>
<tfoot>
<tr>
<td>
<button class="checkAll">CheckAll</button>
<button class="invert">Invert</button>
<button class="add">Add item</button>
<span class="statusbar"></span>
</td>
</tr>
</tfoot>
</table>The Style
The CSS style is optional. If you want to make the table look nice and clean then you need to add the following CSS into your existing CSS file or add it as inline.
<style>
.allcheck-table{
border-collapse: collapse;
margin: 5px;
width:100%;
}
.allcheck-table td{
padding: 10px;
}
.allcheck-table tr:nth-child(even){
background: #f2d785;
}
.allcheck-table label,
.allcheck-table th{
user-select: none;
}
.allcheck-table th{
padding: 8px;
text-align: left;
}
.allcheck-table td,
.allcheck-table tr{
border: 1px solid #c4bd83;
}
.allcheck-table button{
border: 0;
padding: 10px 25px;
background: #c8a12a;
color: #fff;
}
</style>The Javascript
The last and final step to initialize the plugin by adding the following script.
<script>
$('.checkAll').checkAll({
name : 'checkGroup',
inverter: '.invert',
vagueCls: 'indeterminate',
onInit : function(len,count,ids,nodes,value){
// init callback
// params : len, count, length , ids, value, nodes
$('.statusbar').text(len+' items, checked '+count+' item');
},
onCheck: function(id,val,len,count,ids,nodes,value){
// checking callback
// params : id,val,len,count,ids,value,nodes
$('.statusbar').text(len+' items, checked '+count+' item');
},
onFull : function (count,ids,nodes) {
// all in checked callback
// params : count|len, length , ids, value, nodes
$('.statusbar').text(count+' items, checked '+count+' item');
},
onEmpty : function (len) {
//no checked items callback
// params : len
$('.statusbar').text(len+' items, checked 0 item');
}
});
</script>Advanced Configuration Options
The following are some advanced configuration options to create jQuery based select all checkboxes in table column functionality.
| Option | Default | Type | Description |
|---|---|---|---|
| name | ” | String | This option defines the name attribute of the checkbox.
Example: $('.checkAll').checkAll({
name : '',
}); |
| inverter | “” | String | The selector for the invert toggle button to check / unchecked.
Example: $('.checkAll').checkAll({
inverter : "",
}); |
| onInit | null | Function | Callback function to execute on plugin initialization.
Example: $('.checkAll').checkAll({
onInit : function(){
// do something
// parameters: len, count, length , ids, value, nodes
},
}); |
| onCheck | shown in example | Function | Custom function to run on the check.
Example: $('.checkAll').checkAll({
onCheck : function(){
// params: id,val,len,count,ids,value,nodes
},
}); |
| onFull | See Example | Function | When all checkboxes sleeted, then execute a callback function.
Example: $('.checkAll').checkAll({
onFull : function () {
// params: count|len, length , ids, value, nodes
},
}); |
| onEmpty | null | Function | Callback function when deselect.
Example: $('.checkAll').checkAll({
onEmpty : function () {
//no checked items callback
// params: len
},
}); |
Check out the demo and download the source code for implementation. Does this script useful for you? Let me know in below comment section and don’t forget to share it with friends.