jQuery Select all Checkboxes in Table Column

jQuery Select all Checkboxes in Table Column
Code Snippet:checkAll
Author: Shulk
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 7,861
License: MIT
Edit Code online: View on CodePen
Read More

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.

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

Example:

$('.checkAll').checkAll({
	name : '',
});
inverter “” String The selector for invert toggle button to check/uncheck.

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 are sleeted, then execute the 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
        },
});
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...