How to Check and uncheck all using jQuery and JavaScript

In this short tutorial, I will show you How you can check or uncheck all checkboxes and list box options using jQuery and JavaScript. I use them many times within projects.

When its required

It is required when you have the list of items and you have to select multiple items from the list.

Let me explain with an example –

You are creating a department information form where you also have the list of users, In that case for assigning users you need to check them one by one.

In some cases, you need to assign all users to a department for that you either do it by checking one by one which is a time-consuming process when you have lots of users or create a separate checkbox for this. On a single click, you can either checked them all or uncheck it.

If you are working with the table layout here, you can use this functionality for selecting or deleting rows.

What we create?

I will create 3 examples, In first two I am using jQuery and in the third one I am using JavaScript for check or check all.

How to Check and uncheck all using jQuery and JavaScript


Contents

  1. Using jQuery
  2. Using JavaScript
  3. Conclusion

 

1. Using jQuery

# Example 1 – With List box

In the first example, I will create a List box  and a check box for select or unselect all options in List.

HTML CODE

In HTML creating a checkbox and a list box which contain 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>

jQuery CODE

  • Checkbox change event –

Storing checkbox state in checked variable, if its return true means it is been checked then set selected all options in the select element. For this looping over all option using each method and changing the state of selected to true using prop method.

If the state is false then deselect all option, this is same as true one but setting option selected to false in prop method.

  • Select change event

This one is only for changing checkbox state based on option selection.

For example – if you have selected all options from the list then setting checkbox state to checked and if you have set selected all options using Checkbox, in that case, if one of the options get unselected then changing the Checkbox state to unchecked.

<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").removeAttr("checked");
    }
   });
 });
 </script>

Output of Above program

# Example 2 – With Checkboxes

In the second example, I am using a single checkbox for check or uncheck all other checkboxes.

HTML CODE

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>

jQuery CODE

  • Check all checkbox Change event

First, getting the state of the checkbox if its return true then setting other checkbox checked state to true otherwise false.

For this using checkbox class to select all checkboxes and looping over them using each method and setting checkbox checked state to true or false using prop method based on Check all checkbox checked state.

  • Click event on Checkbox with class='checkbox'

When all checkboxes are checked is equal to the total number of checkboxes then setting checkbox with id='checkall' to checked otherwise removing checked.

<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").removeAttr("checked");
    }

  });
});
</script>

Output of Above program


 

2. Using JavaScript

# Example3 – With TableLayout

In this example, hiding rows which are get checked and same as above examples, a checkbox to check or uncheck all and also created two buttons.

One for hiding selected rows and other for reset table layout.

HTML CODE

Within HTML created a table layout in which all rows have a checkbox for selection

<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'></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'></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'></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'></td>
 </tr>
 </table>

JavaScript CODE

Created 3 functions checkAll(), hideChecked(), and reset().

  • checkAll()

This function called when table header checkbox gets checked or unchecked.

From here, set other rows checkbox checked or unchecked by looping over all elements which have name='check'.

  • hideChecked()

It is called when Hide button gets clicked. This function hides all checked rows.

  • reset()

It is called on reset button click. This 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;
     }
   }
 }
 
 // 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>

Output of the program


 

3. Conclusion

Learned about How to use a single checkbox to set checked or unchecked all other checkboxes or select list options.

Created three examples, In first two uses jQuery where, set selected all options from the list box on check all checkbox checked otherwise unselect them, thing done in the second example, but here, uses Checkbox list.

In both examples, uses prop method for changing states and in the third one uses JavaScript where hiding the checked rows from the table layout.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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