Random Snippets » checkboxes

How to loop through checkboxes or radio button groups via JavaScript

Knix — Fri, 16 May 2008 05:00:18 +0000

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

Here is the plain HTML:

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:

function loopForm(form) {
    var cbResults = 'Checkboxes: ';
    var radioResults = 'Radio buttons: ';
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'checkbox') {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ' ';
            }
        }
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
    }
    document.getElementById("cbResults").innerHTML = cbResults;
    document.getElementById("radioResults").innerHTML = radioResults;
}

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.

JavaScript to select all or none of the checkboxes in a form

Knix — Thu, 28 Feb 2008 07:24:09 +0000

Here is a quick demo of the select all or none JavaScript function that automatically toggles all of your checkboxes in a given form.

Demo

This is the plain HTML of the form:


My favorite programming/scripting language is:
Select All | None

JavaScript

Perl

PHP

C++

There is nothing exciting about the HTML code except for line 3 where all the magic happens. There are 2 links in this line of code:

All - When the user clicks on this link, it will execute the selectToggle() JavaScript function and passes over 2 arguments: the value to set the checkboxes (true in this case) and the name of the form.
None - This link executes the selectToggle() JavaScript function and passes over the false value to uncheck the checkboxes and the name of the form.

Here is a peek at the selectToggle() JavaScript function:

function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}

This function basically loops through all of the inputs in the given form name that is passed over as an argument. Depending on the value of the toggle parameter, which can be true or false, each form element will checked or unchecked respectively.