How to Check and uncheck all using jQuery and JavaScript

The check and uncheck all functionality basically is seen where there is the large list of records are available. This small feature makes little easier for the users to perform an action.

You may have seen it on Gmail, WordPress Admin dashboard.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

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

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

HTML

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

  • 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 checkbox state based on option selection.

Check total options and total selected options if its equal then set 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").removeAttr("checked");
    }
   });
 });
 </script>

Output

# Example 2 – With Checkboxes

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

  });
});
</script>

Output


 

2. Using JavaScript

# Example3 – With TableLayout

Hiding rows which are get 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.

<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>

Script

Created 3 functions checkAll(), 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.

  • 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;
     }
   }
 }
 
 // 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


 

3. Conclusion

Using above scripts you can check/uncheck all checkboxes or select/unselect all dropdown options.

You can either use jQuery or JavaScript to implement this functionality within your project.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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