Wednesday 6 September 2017

How to Select / Deselect All Checkboxes using jQuery

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>