• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions
  • Installation

Check Uncheck All Checkboxes with Single checkbox using jquery

August 22, 2022 By Md Nurullah

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>

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.

Primary Sidebar

Latest Tutorials

  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL
  • Filter Data with Checkboxes in PHP & MySQL
  • Filter Data by Category in PHP & MySQL
  • Filter Prices From Low to High in PHP, MySQL

Popular Tutorials

  • How to Trigger a Click Event on Pressing Enter Key Using jQuery
  • Responsive Portfolio Gallery With Filtering Category Using jQuery
  • jQuery Form Validation Before Submit
  • Check Uncheck All Checkboxes with Single checkbox using jquery
  • How to Close Modal on Click Outside Using jQuery

Categories

  • Ajax (11)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved