Skip to main content

Check And Unchecked All Checkbox Using Javascript


This tutorial will help you on how to check and unchecked all checkbox in your form using javascript. This tutorial will be helpful to thus programmer who are developing a system that involves many checkbox with check and unchecked function. This feature is very useful also for user because they don't have to check the checkbox one by one. Follow the steps bellow to understand more in this tutorial.

Step 1: Creating our Javascript that check and unchecked all the checkbox in our form

Copy the code bellow and save it as "index.html"

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function checkAll(checkEm) {
  5. var cbs = document.getElementsByTagName('input');
  6. for (var i = 0; i < cbs.length; i++) {
  7. if (cbs[i].type == 'checkbox') {
  8. if (cbs[i].name == 'menu[]') {
  9. cbs[i].checked = checkEm;
  10. }
  11. }
  12. }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17.  
  18. </body>
  19. </html>

Step 2: Creating our form that display the checkbox

The code bellow will give us the checkbox display and our check all and unchecked all button. Copy the code bellow and paste it between the body tag in our "index.html".

  1. <form action="" method="post">
  2. <input type="checkbox" name="menu[]" value="menu1" style="width: 16px;">Menu 1<br>
  3. <input type="checkbox" name="menu[]" value="menu2" style="width: 16px;">Menu 2<br>
  4. <input type="checkbox" name="menu[]" value="menu3" style="width: 16px;">Menu 3<br>
  5. <input type="checkbox" name="menu[]" value="menu4" style="width: 16px;">Menu 4<br>
  6. <input type="button" class="my_form-check-button" onClick="checkAll(true);" value="Check All"/>
  7. <input type="button" class="my_form-check-button" onClick="checkAll(false);" value="Clear All"/>
  8. </form>

That's it you've been successfully created the code that allows you to check and unchecked all the checkbox.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.