Check Uncheck All Checkboxes with Single checkbox using jquery

by

Hello Developers, In this tutorial, you will learn to check uncheck all checkboxes with a single checkbox using jquery & HTML with some steps that are very simple to understand. So, First of all, learn it then implement it into your project.

The check and uncheck All checkboxes feature in jquery is very simple to perform delete, edit & update functionality quickly by selecting multiple records. So, This feature is frequently used on various websites.

jquery check uncheck all checkboxes

Check and uncheck all checkboxes using jQuery in the table

Here, I have created multiple checkboxes with multiple data within a <tbody> tag and a single checkbox to check all checkboxes within a <tfood> tag of an HTML table. Once you learn it, You can easily use it, with other types of data formats using the given jquery code.

Learn Also –

Responsive Portfolio Gallery with filtering category using jQuery

How to Create Todo App using jQuery

JQuery Form validation before the submit

Let’s understand how does it work –

  • When you check a single checkbox of check all then all the checkboxes of records will be automatically checked.
  • Also, When you uncheck a single checkbox of check all then all the checkboxes of records will be automatically unchecked.
  • If you uncheck any one of the checkboxes of records then a single checkbox of check all will be unchecked automatically

1. Create HTML Checkboxes in a Table

To create HTML checkboxes, you will have to implement the following points –

  • Declare class=”checkbox-group” attribute within the <tbody> tag. remember that only checkboxes of records must be within this class and you must declare another single checkbox to check all out of this class.
  • Another single checkbox to check all must be created with id=”singleCheckbox”  attribute

Don’t forget to Also, you should include the custom.js file (It is explained in the next step) and the following jquery ajax CDN link on the page where checkboxes are created.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

File Name – checkbox-page.html

   <!DOCTYPE html>
   <html>
   <body>
  <table border="1" cellspacing="0" cellpadding="10">
<tbody class="checkbox-group">
<tr>
<td><input type="checkbox" /></td><td>First Checkbox </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Second Checkbox</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Third Checkbox</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Fourth Checkbox</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Fifth Checkbox </td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="checkbox" id="singleCheckbox" /></td>
<td><b>Check all</b></td>
</tr>
</tfoot>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
  </body>
   </html>

2. Check and uncheck all checkboxes with jQuery

To check and uncheck all checkboxes, you will have to implement the following points –

  • Assign an id “#singleCheckbox” to a variable #singleCheckbox
  • Also, assign “.checkbox-group input[type=’checkbox’]” to another variable checkboxGroup
  • Apply click event on singleCheckbox with the following condition
    • If singleCheckbox is checked then all checkboxes will be checked otherwise all checkboxes will be unchecked
  • If any single of checkbox group is unchecked then a single checkbox to check all will be unchecked

File Name – custome.js

<script type="text/javascript">

$(document).ready(function(){

    const singleCheckbox = '#singleCheckbox';
    const checkboxGroup = ".checkbox-group input[type='checkbox']";
    $(singleCheckbox).on('click',function(){
        if(this.checked){
            $(checkboxGroup).each(function(){
                this.checked = true;
            });
        }else{
             $(checkboxGroup).each(function(){
                this.checked = false;
            });
        }
    });
    
    $(checkboxGroup).on('click',function(){
        if($(checkboxGroup+':checked').length == $(checkboxGroup).length){
            $(singleCheckbox).prop('checked',true);
        }else{
            $(singleCheckbox).prop('checked',false);
        }
    });
});

</script>