jQuery Select all Checkboxes in Table Column

The “checkAll” is lightweight and well developed plugin for jQuery to select all checkboxes in table column (or anywhere in HTML). It allows you to toggle (select all / deselect all) with one checkbox / button. Beside this, you can execute callback functions on various events with plugin perimeters/arguments.

Furthermore, this plugin can be highly customize with its available options and CSS.

Plugin Overview and Preview

Plugin: checkAll
Author: Shulk
Category: Text & Input
Published: November 9, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 8 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
81 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

How to Create Select All Checkboxes In Table Column

1. To create “select all checkboxes in table column” functionality, we need to getting started with 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 checkbox 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 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.

Option Default Type Description
name String This option define the name attribute of checkbox.

Example:

$('.checkAll').checkAll({
	name : '',
}); 
inverter “” String The selector for 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 check.

Example:

$('.checkAll').checkAll({
	onCheck : function(){
            // params:  id,val,len,count,ids,value,nodes
        },
}); 
onFull See Example Function When all checkboxes sleeted, then execute 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
        },
}); 

Changelog

9/11/2019

  • Initial release.

There are no reviews yet. Be the first one to write one.

Submit Your Review