How to loop through checkboxes or radio button groups via JavaScript


Do you have a form with checkboxes or radio buttons that you would like to loop through via JavaScript? This JavaScript function will do just that!

Demo
I like to program in:

PHP

Perl

Ruby

ASP


I like to eat:

Snickers

Hershey's

M&M's

Nerds


I like to drink:

Coke

Gatorade

Pepsi

Milk




Here is the plain HTML:

  1. <form name="thisForm">
    
  2. I like to program in:<p>
    
  3. <input type="checkbox" value="PHP" CHECKED>PHP<p>
    
  4. <input type="checkbox" value="Perl">Perl<p>
    
  5. <input type="checkbox" value="Ruby">Ruby<p>
    
  6. <input type="checkbox" value="ASP">ASP<p>
    
  7. <hr>
    
  8. I like to eat:<p>
    
  9. <input type="radio" value="Snickers" name="candy" CHECKED>Snickers<p>
    
  10. <input type="radio" value="Hershey's" name="candy">Hershey's<p>
    
  11. <input type="radio" value="M&M's" name="candy">M&M's<p>
    
  12. <input type="radio" value="Nerds" name="candy">Nerds<p>
    
  13. <hr>
    
  14. I like to drink:<p>
    
  15. <input type="radio" value="Coke" name="drink" CHECKED>Coke<p>
    
  16. <input type="radio" value="Gatorade" name="drink">Gatorade<p>
    
  17. <input type="radio" value="Pepsi" name="drink">Pepsi<p>
    
  18. <input type="radio" value="Milk" name="drink">Milk<p>
    
  19. <br>
    
  20. <input type="button" value="Submit" onclick="loopForm(document.thisForm);"> 
    
  21. </form>
    
  22. <p>
    
  23. <div id="cbResults"></div>
    
  24. <div id="radioResults"></div>

As usual, there is not too much action going on here. It is just a plain form with some checkboxes and 2 radio button groups called candy and drink. Radio buttons with the same name will be grouped and allows the users to only select one option out of the entire group. The submit button will launch the loopForm JavaScript function and the myForm DOM object is passed over as an argument. There are also 2 divs in lines 23-24 where are checkbox and radio button results will be posted. Now, on to more exciting things.

Here is the JavaScript code:

  1. function loopForm(form) {
  2.     var cbResults = 'Checkboxes: ';
  3.     var radioResults = 'Radio buttons: ';
  4.     for (var i = 0; i < form.elements.length; i++ ) {
  5.         if (form.elements[i].type == 'checkbox') {
  6.             if (form.elements[i].checked == true) {
  7.                 cbResults += form.elements[i].value + ' ';
  8.             }
  9.         }
  10.         if (form.elements[i].type == 'radio') {
  11.             if (form.elements[i].checked == true) {
  12.                 radioResults += form.elements[i].value + ' ';
  13.             }
  14.         }
  15.     }
  16.     document.getElementById("cbResults").innerHTML = cbResults;
  17.     document.getElementById("radioResults").innerHTML = radioResults;
  18. }

This function loops through all the elements in the form that was passed over to the function.

If the element is of checkbox type and it is checked, the value of this element will be appended to our cbResults variable which is keeping track of our checkbox results.

If the element is of radio type and it is checked, the value of this element will be appended to our radioResults variable which is keeping track of our radio button results.

After all the looping is finished, the results are cbResults and radioResults are inserted into the cbResults div and radioResults div respectively.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!





Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

20 thoughts on “How to loop through checkboxes or radio button groups via JavaScript”

  1. Hi Allen,
    This example really helped. However, I am trying to find a complete Javascript code example where one submit button will display the output for several checkbox groups. I am mostly having trouble with the coding for the functions and having them work the way they should to drive the various check box groups.
    Here is the code I have so far, hope you can help:

    Checkbox Test

    function testButton1 (form1)
    {
    var chk1 = ”;

    for (i = 0; i < form1.length; i++)
    if (form1[i].checked == true)
    chk1 += form1[i].value + ' ';
    document.write(chk1 + " is selected");
    }

    function testButton2 (form2)
    {

    var chk2 = '';

    for (j = 0; j < form2.length; j++)
    if (form2[j].checked == true)
    chk2 += form2[j].value + ' ';
    document.write(chk2 + " is selected");
    }

    Systems:
    ODW
    MSAccess
    Kbase
    UDMS
    Languages:
    PL/SQL
    VMS
    JavaScript
    SAS

    Thanks in advance!

      1. Thanks Allan,
        The code you sent over worked great. I do have one last question for you as it relates to a project that I am currently working on. Using your initial above form example a model, how would you recode it to consist of all checkboxes (in place of the 2 radio button options)? For instance, say you wanted the output to display as follows:

        programming languages selected:
        food selected:
        drinks selected:

        I have been trying to come up with solutions, but have not succeeded. Your valuable assistance in this would be greatly appreciated.
        Thanks again,
        Hugo

  2. Thanks a lot for this post on the Javascript..It has kept me up for 3straight nites and now here it is,the solution to my worries!! God bless you plenty!!

  3. This is great, however what I’m looking for is an alert that says, You need to select a choice in the candy section if there is none chosen on submit.
    Can you help?

  4. Hey,

    U gave me such a brilliant idea :)

    Actually i’m just learning the JScript and wanna create a test paper where there are 20 questions and some answers. I want to create a script by which i can get the answers ticked by the candidates as well as i want to create a script by which i can find the count of correct answers ticked by them.

    your script will hepl me a lot in getting the logic. :)

    Thanks a lot….

  5. this is sort of what i wanted. i’m looking to do the same thing but it must change as soon as the checkbox is checked. basicly i’m creating a mail script that displays all the messages in a table and each row gets a checkbox. if you select atleast 1 checkbox then a hidden div (a floating menu) will pop up and say with selected what would you like to do and they would choose delete or mark read or mark unread. any idea on how this can be done

Leave a Reply

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