Checkboxes

Checkboxes work a little differently than radio buttons. With checkboxes, multiple selections can be made. This really doesn't effect the JavaScript used to find out what boxes are checked. It does, however, change what you do to assign the multiple values to a variable.

Check out this sample. You can check as many boxes as you like and the results will appear in the alert() box. This is done by looping through all of the checkboxes much like we did with radio buttons. The checkboxes that are checked will have their values "added" onto a dynamically growing string that is eventually displayed. This is called "appending" to a string and is a common programming technique.

A little disclaimer before we continue. Yes, I know the text display ends with a comma. The listing could be cleaned up, but I don't want string manipulations to get in the way of presenting how checkboxes are tested and strings are appended.

The appending done in the example may not work in older Netscapes like 4.x.

The FOR & IF

If you view the sample's source code you'll recognize almost all of it. Start out with a <form> containing checkboxes. I named my <form> "interests" and all of my checkboxes "box". They all have a different VALUE.

You cycle through checkboxes just like you do radio buttons. You use the "checked == true" in the IF statement, too.

I've added a timesaving twist. Since we'll be using the object "document.interests.box" a lot, I just assigned the variable "boxes" to it at the start of the function. Now I can use "boxes" in place of "document.interests.box" in object references. This is a real timesaver with long JavaScript object references. I've highlighted this in red.

function figure_this_out(){
var boxes = document.interests.box;

for (i = 0; i < boxes.length; i++){
if (boxes[i].checked == true){
Stuff you want done with the checked values.
}//ends IF
}//ends FOR
}//ends function

You should recognize the above from the radio buttons lesson. The only real difference is the use of the variable "boxes" to hold the "document.interests.box" object.

The real trick to checkboxes is dealing with multiple values. You can collect all of the selected values into one string by appending to a string.

Appending To A String

The crux of appending to a string can be summed up as "string = string + new_stuff". This formula keeps the old and adds the new. As with any string variable, we first need to declare the variable:

function figure_this_out(){
var boxes = document.interests.box;
var display = "You like ";

for (i = 0; i < boxes.length; i++){
if (boxes[i].checked == true){
Stuff you want done with the checked values.
}//ends IF
}//ends FOR
}//ends function

The variable I'll be using to build the string is called "display". I've given it the initial value of "You like " (note the space at the end of this initial string). Lets get on to adding the checked interests to the "display" string.

function figure_this_out(){
var boxes = document.interests.box;
var display = "You like ";

for (i = 0; i < boxes.length; i++){
if (boxes[i].checked == true){
display = display + boxes[i].value + ", ";
}//ends IF
}//ends FOR
}//ends function

It's as easy as that. Now when the IF detects a checked box, it slaps its VALUE onto the end of the old string. It also adds a comma and space. As more checked boxes are found, their VALUEs are added to the "display" string. The IF statement insures that only "checked == true" box values are included.

Once the loop is fully run, we'll have a "display" string that will include all of the checked box's VALUEs. We can modify and display this string any way we like. I used a simple alert() box.

We'll learn a lot more about making and breaking long strings when we study JavaScript cookies.

Summary & Exercises

Checkboxes can be used much like radio buttons with one crucial difference. Multiple selections can be made and multiple values must be handled.

A common JavaScript method of handling multiple values from checkboxes is to "add" or "append" all of the checked values into one long string. This sting can be modified and displayed in a variety of ways.

For practice, begin by taking our sample and having the alert() box display the unchecked items. Something like "You dislike..." Hint: "boxes[i].checked == false".

Now try making a more complex form using both radio buttons and checkboxes. You'll find it much easier to use separate loops for each group of buttons and boxes. Assign different button/boxes values to separate string variables. You can mix and match the strings later using simple text parsing.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index