jQuery Select all Checkboxes in Table Column

The “checkAll” is a lightweight and well-developed plugin for jQuery to select all checkboxes in the table column (or anywhere in HTML). It allows you to toggle (select all / deselect all) with one checkbox/button. Besides this, you can execute callback functions on various events with plugin perimeters/arguments. Furthermore, this plugin can be highly customized with its available options and CSS.

How to Create Select All Checkboxes In Table Column

1. To create the “select all checkboxes in table column” functionality, we need to get started with the jQuery checkAll plugin. So, first of all, load the jQuery JavaScript library into your web project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After loading jQuery, include checkAll plugin JavaScript file into your HTML document.

<!-- checkAll JS -->
<script src="js/checkAll.min.js"></script>

3. Create HTML table and place some checkboxes in 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>

4. Style your table with CSS (optional).

.cd-table {
	border-collapse: collapse;
	margin: 5px;
}

.cd-table td {
	padding: 10px;
}

.cd-table tr:nth-child(even) {
	background: #f2f2f2;
}

.cd-table label,
.cd-table th {
	user-select: none;
}

.cd-table th {
	padding: 8px;
	text-align: left;
}

.cd-table td,
.cd-table tr {
	border: 1px solid #ddd;
}

.cd-table button {
	border: 0;
	padding: 8px;
	background: #0aac0a;
	color: #fff;
}

5. When all was done, 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>

Advance Configuration Options for Select all Checkboxes in Table

The following are some advanced configuration options to create jQuery based select all checkboxes in table column functionality.

$('.checkAll').checkAll({
	name : '',
});

$('.checkAll').checkAll({
	inverter : "",
});

$('.checkAll').checkAll({
	onInit : function(){
            // do something
            // parameters: len, count, length , ids, value, nodes
        },
});

$('.checkAll').checkAll({
	onCheck : function(){
            // params:  id,val,len,count,ids,value,nodes
        },
});

$('.checkAll').checkAll({
	onFull : function () {
            // params:  count|len, length , ids, value, nodes
        },
});

$('.checkAll').checkAll({
	onEmpty : function () {
            //no checked items callback
            // params: len
        },
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.