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