Time-Saving Tips: Learn to Check and Uncheck All using jQuery & JavaScript

Last updated on by

Manually checking or unchecking each box on HTML forms with multiple checkboxes can be time-consuming and frustrating. The strength of jQuery and JavaScript, however, allows you to quickly check or uncheck all checkboxes with just a few lines of code.

In this article, we will explore how to check and uncheck all checkboxes using jQuery and JavaScript and provide examples of how to implement this functionality in your projects.

Time-Saving Tips: Learn to Check and Uncheck All using jQuery & JavaScript

Download

Table of Content

  1. Check Uncheck all using jQuery
    1. Check Uncheck all listbox
    2. Check uncheck all checkboxes
  2. Check Uncheck all using JavaScript
    1. Check uncheck all checkboxes
    2. Check uncheck all checkbox in TableLayout
  3. Conclusion

1. Check Uncheck all using jQuery

# Example 1 – Check Uncheck All List box Using jQuery

Create a List box and a checkbox for select or unselect all options in List.

HTML

In HTML create a checkbox and a list box that contains usernames.

<div class='container'>
    <h2>Example1 - With Listbox</h2>
    <input type='checkbox' id='checkallusers' value=''> Select All<br/>
    <select id='sel_users' size="6" multiple>
         <option value='Anil'>Anil</option>
         <option value='Amit'>Amit</option>
         <option value='Mayank'>Mayank</option>
         <option value='Sonarika'>Sonarika</option>
         <option value='Vishal'>Vishal</option>
         <option value='Yogesh'>Yogesh</option>
    </select>
</div>

Script

  • Checkbox change event –

If checkbox checked state is TRUE then loop through all options of the select element and set its selected attribute to true.

Perform its opposite if the checkbox checked state is FALSE.

  • Select change event

This one is only for changing the state of checkboxes based on option selection.

Check total options and total selected options if it is equal then set the Select All checkbox checked otherwise unchecked it.

<script type='text/javascript'>
$(document).ready(function(){
    $("#checkallusers").change(function(){
          var checked = $(this).is(':checked'); // Checkbox state

          // Select all
          if(checked){
                $('#sel_users option').each(function() {
                     $(this).prop('selected',true);
                });
          }else{
                // Deselect All
                $('#sel_users option').each(function() {
                     $(this).prop('selected',false);
                });
          }
 
    });
 
    // Changing state of Checkbox
    $("#sel_users").change(function(){
 
          // When total options equals to total selected option
          if($("#sel_users option").length == $("#sel_users option:selected").length) {
               $("#checkallusers").prop("checked", true);
          } else {
               $("#checkallusers").prop("checked", false);
          }
    });
 });
 </script>

View Demo

# Example 2 – Checking Unchecking All Checkboxes Using jQuery

Using a single checkbox to check or uncheck all other checkboxes.

HTML

Created a checkbox with id='checkall' and 4 more checkboxes with class='checkbox'.

<div class='container'>
     <h2>Example2 - With Checkboxes</h2>
     <input type="checkbox" id='checkall' /> Select All<br/>
     <input type="checkbox" class='checkbox' name="languages" value="PHP"> PHP<br/>
     <input type="checkbox" class='checkbox' name="languages" value="AngularJS"> AngularJS<br/>
     <input type="checkbox" class='checkbox' name="languages" value="Python"> Python<br/>
     <input type="checkbox" class='checkbox' name="languages" value="Java"> Java<br/>
</div>

Script

  • Check all checkbox Change event

Get checkbox checked state if its TRUE then loop through all checkboxes and set checked state to true otherwise set to false.

  • Click event on Checkbox with class='checkbox'

Check total checkbox is equal to total checked checkboxes. If it is equal then set check all checkbox checked otherwise unchecked.

<script type='text/javascript'>
$(document).ready(function(){
    // Check or Uncheck All checkboxes
    $("#checkall").change(function(){
          var checked = $(this).is(':checked');
          if(checked){
               $(".checkbox").each(function(){
                    $(this).prop("checked",true);
               });
          }else{
               $(".checkbox").each(function(){
                    $(this).prop("checked",false);
               });
          }
    });
 
    // Changing state of CheckAll checkbox 
    $(".checkbox").click(function(){
 
          if($(".checkbox").length == $(".checkbox:checked").length) {
                $("#checkall").prop("checked", true);
          } else {
                $("#checkall").prop("checked", false);
          }

    });
});
</script>

View Demo

2. Check Uncheck all using JavaScript

# Example3 – Check uncheck all checkboxes

List checkboxes with Select All checkbox.

HTML

  • A “Select All” checkbox is created with an onchange event that triggers the checkAll() function.
  • Multiple checkboxes are created with an onclick event that calls the checkCheckbox() function.
<div class='container'>
     <h2>Example3 - Check uncheck all Checkboxes using JavaScript</h2>
     <input type="checkbox" id='checkall' onchange="checkAll();" /> Select All<br/>
     <input type="checkbox" class='checkbox' name="languages" value="PHP" onclick="checkCheckbox();" > PHP<br/>
     <input type="checkbox" class='checkbox' name="languages" value="AngularJS" onclick="checkCheckbox();" > AngularJS<br/>
     <input type="checkbox" class='checkbox' name="languages" value="Python" onclick="checkCheckbox();" > Python<br/>
     <input type="checkbox" class='checkbox' name="languages" value="Java" onclick="checkCheckbox();" > Java<br/>
</div>

JavaScript

Create 2 functions –

  • checkAll() – This function calls when check/uncheck all checkbox checked status changed.
    • Selects all checkboxes with the class "checkbox" and the “checkall” checkbox.
    • Retrieves the checked status of the “checkall” checkbox.
    • Sets the checked property of each checkbox to the checked status of the “checkall” checkbox.
  • checkCheckbox() – This function calls when a checkbox is gets clicked.
    • Retrieves all checkboxes with the class "checkbox" and the “Select All” checkbox.
    • Updates the state of the “Select All” checkbox based on whether all checkboxes are checked or not.
function checkAll(){
    var checkboxes = document.querySelectorAll(".checkbox");
    var checkall = document.getElementById("checkall");
    var checked = checkall.checked;

    checkboxes.forEach(function (checkbox) {
        checkbox.checked = checked;
    });
}

function checkCheckbox(){

    var checkboxes = document.querySelectorAll(".checkbox");
    var checkall = document.getElementById("checkall");

    checkall.checked = checkboxes.length === document.querySelectorAll(".checkbox:checked").length;

}

View Demo

# Example4 – Check uncheck all checkbox in TableLayout

Hiding rows that are getting checked.

HTML

Within HTML created a table layout in which all rows have a checkbox for selection. Create two buttons to hide the checked rows or reset the layout with jQuery.

Added onchange event on Check all and other checkboxes. Check all checkbox calls checkAll(this) function and remaining checkboxes call checkChange() function.

<h2>Example3 - With TableLayout</h2>
 
<input type='button' value='Hide' id='but_hide' onclick='hideChecked();' />&nbsp;
<input type='button' value='Reset' id='but_reset' onclick='reset();' ><br/>
<table border='1' >
    <tr>
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th><input type='checkbox' name='showhide' onchange="checkAll(this)"></th>
    </tr>
    <tr id='tr_1'>
         <td align='center'>1</td>
         <td align='center'>Sonarika</td>
         <td align='center'>23</td>
         <td align='center'><input type='checkbox' name='check' id='check_1' onchange='checkChange();'></td>
    </tr>
    <tr id='tr_2'>
         <td align='center'>2</td>
         <td align='center'>Yogesh</td>
         <td align='center'>23</td>
         <td align='center'><input type='checkbox' name='check' id='check_2' onchange='checkChange();'></td>
    </tr>
    <tr id='tr_3'>
         <td align='center'>3</td>
         <td align='center'>Amit</td>
         <td align='center'>25</td>
         <td align='center'><input type='checkbox' name='check' id='check_3' onchange='checkChange();'></td>
    </tr>
    <tr id='tr_4'>
         <td align='center'>4</td>
         <td align='center'>Sunil</td>
         <td align='center'>22</td>
         <td align='center'><input type='checkbox' name='check' id='check_4' onchange='checkChange();'></td>
    </tr>
</table>

Script

Created 4 functions checkAll(), checkChange(), hideChecked(), and reset().

  • checkAll()

Loop all checkboxes and set checked to true when Check all checkbox checked state is TRUE otherwise set all checkboxes checked state to FALSE.

  • checkChange()

This function calls when a checkbox checked status gets changed. Count the total number of checkboxes and checked checkboxes.

If the total number of checkboxes equals the number of checked checkboxes then set Check all checkbox checked otherwise, unchecked.

  • hideChecked()

Loop on all checked rows and set the display property to none.

  • reset()

Using this function reset the table layout.

<script type='text/javascript'>
 
// Set check or unchecked all checkboxes
function checkAll(e) {
    var checkboxes = document.getElementsByName('check');
 
    if (e.checked) {
         for (var i = 0; i < checkboxes.length; i++) { 
              checkboxes[i].checked = true;
         }
    } else {
         for (var i = 0; i < checkboxes.length; i++) {
              checkboxes[i].checked = false;
         }
    }
}
 
function checkChange(){

    var totalCheckbox = document.querySelectorAll('input[name="check"]').length;
    var totalChecked = document.querySelectorAll('input[name="check"]:checked').length;

    // When total options equals to total checked option
    if(totalCheckbox == totalChecked) {
          document.getElementsByName("showhide")[0].checked=true;
    } else {
          document.getElementsByName("showhide")[0].checked=false;
    }
}
// Hide Checked rows
function hideChecked(){
    var checkboxes = document.getElementsByName('check');
 
    for (var i = 0; i < checkboxes.length; i++) {
          var checkid = checkboxes[i].id;
          var split_id = checkid.split("_");
          var rowno = split_id[1];
          if(checkboxes[i].checked){
               document.getElementById("tr_"+rowno).style.display="none";
          } 
    }
 
}
 
// Reset layout
function reset(){
    var checkboxes = document.getElementsByName('check');
    document.getElementsByName("showhide")[0].checked=false;
 
    for (var i = 0; i < checkboxes.length; i++) {
         var checkid = checkboxes[i].id;
         var split_id = checkid.split("_");
         var rowno = split_id[1];
         document.getElementById("tr_"+rowno).style.display="table-row";
         checkboxes[i].checked = false;
    }
 
}
</script>

View Demo

3. Conclusion

It is simple to check and uncheck all checkboxes using jQuery and JavaScript, which can save a tonne of time and effort when working with large forms. Using the examples in this article, you can quickly add this functionality to your projects.

To make sure that your code executes as you intended, keep in mind to use the proper selectors and bind the functions to the appropriate events.

If you found this tutorial helpful then don't forget to share.

© 2016-2024 Makitweb, All rights reserved