How to Select / Deselect All Checkboxes using jQuery

If you are developer and looking for a jQuery code-snippet that selects and de-selects multiple checkboxes by clicking “Select All” checkbox, like in Gmail.com, rediffmail.com and yahoo.com. Then you are at right place. 

This is very simple and most commonly used in web application and specially its used where there is multiple record listing. 

In Admin section,  this functionality is needed in every page, like User Listing, Product Listing, Album Listing  & images listing etc. 

When selected "Select All" checkbox, It will select all the checkbox under the main checkbox. 
If you de-select the "Select All", It will de-select all the checkbox under this main checkbox.

You can use below code and do the modification as per your requirement. This code is very useful not just in current web application but also for future.

select all checkbox jquery DEMO

 


 

        
 

        
Select All
 

    
 

        
 

        
Name2
 

    
 

        
 

        
Name3
 

    
 

        
 

        
Name4
 

    
 

        
 

        
Name5
 

    
 

        
 

        
Name6
 

    

Code Snippet

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript"> 

jQuery(document).ready(function() {

    jQuery('#checkbox_all').click(function(){ 
        
        if($(this).is(":checked")){ 
            jQuery('input[type="checkbox"].chk').each(function(){ 

                jQuery(this).prop("checked",true);

            });         

        }else{ 

            jQuery('input[type="checkbox"].chk').each(function(){ 

                jQuery(this).prop("checked",false);

            });                 

        } 

     

    }); 

}); 

</script> 
<table border="1" rules="groups" style="width: 200pxpx;">
<tbody>
<tr> 

        <th><input id="checkbox_all" name="checkbox" type="checkbox" /></th> 

        <th>Select All</th> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name2</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name3</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name4</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name5</td> 

    </tr>
<tr> 

        <td><input class="chk" name="checkbox" type="checkbox" /></td> 

        <td>Name6</td> 

    </tr>
</tbody></table>

Best Related Posts are Following:

1. How can I check DOM is ready in jQuery.
2. How to add new row in existing table using jQuery.
3. What is difference between event.preventDefault() and return false in Javascript?.
4. How to Include a JavaScript file in another JavaScript file?.
5. How can I get query string values in JavaScript and jQuery?.
6. What is the Correct content-type of JSON and JSONP?.
7. jQuery Mobile interview questions and answers.
8. How to Add attribute in A-Tag using jQuery.
9. Lightbox vs Fancybox.
10. Firebase Chat with Facebook and Twitter Integration.
11. jQuery datepicker first week monday.
12. How to Create A Basic Plugin In JQuery.
13. Difference between JSON and JSONP.
14. jQuery Function with Examples.
15. jQuery Fancybox.
16. jQuery Autocomplete.
17. jQuery Slider Flowplayer Links with Demo.
18. jQuery multi column sorting with jQuery - Live Demo.
19. jQuery Facebook Autocomplete With Demo.
20. jQuery naming convention - jQuery tutorial for beginner.
21. How to Select / Deselect All Checkboxes using jQuery.