jQuery Select all Checkboxes in Table Column

Category: Text & Input | November 23, 2019
jQuery Select all Checkboxes in Table Column
Author: shulkme
Official Page: Go to Website
Last Update:December 22, 2019
License:MIT

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.

OptionDefaultTypeDescription
nameStringThis option defines the name attribute of the checkbox.

Example:

$('.checkAll').checkAll({
	name : '',
});
inverter“”StringThe selector for the invert toggle button to check / unchecked.

Example:

$('.checkAll').checkAll({
	inverter : "",
});
onInitnullFunctionCallback function to execute on plugin initialization.

Example:

$('.checkAll').checkAll({
	onInit : function(){
            // do something
            // parameters: len, count, length , ids, value, nodes
        },
});
onCheckshown in exampleFunctionCustom function to run on the check.

Example:

$('.checkAll').checkAll({
	onCheck : function(){
            // params:  id,val,len,count,ids,value,nodes
        },
});
onFullSee ExampleFunctionWhen all checkboxes sleeted, then execute a callback function.

Example:

$('.checkAll').checkAll({
	onFull : function () {
            // params:  count|len, length , ids, value, nodes
        },
});
onEmptynullFunctionCallback 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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.