• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Home
  • About Us
  • Django
  • Laravel
  • Interview Questions
  • Tips

CodingStatus

- Learn Coding to Build Web Applications

  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL

Check Uncheck All Checkboxes with Single checkbox using jquery

December 28, 2021 By Md Nurullah Leave a Comment

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>

Related Posts:

  • Top SQL Interview Questions With Answers for 2021
  • Update Data in SQL Table with Form Using PHP & MYSQL
  • Delete Multiple Records with Checkboxes in PHP & MySQL
  • Node.js MySQL CRUD Operation with Example

Filed Under: jQuery

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Recent Posts

  • PHP Interview Questions and Answers
  • Upload Multiple Files to Store in MySQL Database Using PHP
  • How to Insert Data Using Ajax in PHP
  • SQL Join 3 Tables – Join Query for Three Tables
  • Load Records on Select Box using Ajax, PHP & MySQL
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2022 CodingStatus - All Rights Reserved