Controlling Checkboxes With JavaScript

Sometimes it's desirable to control whether or not certain checkboxes are checked, or to do something depending on which ones are checked.

Although CGI scripts can do their own error checking and display messages to the form user as needed, letting JavaScript do some of the preliminary checks can be faster and less frustrating for the form user.

This article shows you how to use JavaScript to determine if certain checkboxes are checked and how to check and uncheck checkboxes. Four useful working examples are provided to assist understanding:

1. Limiting the number of checkboxes that can be checked, useful when the user is allowed to check only a certain number of checkboxes. For example, you might have a list of six reports and the customer may select up to three to get free with an order.

2. Totaling the value of checked checkboxes, useful when customers check items they want to order and you want to present the current order total whenever a check or uncheck is performed.

3. Checking or unchecking a group of checkboxes by clicking a button, useful when you have a large number of checkboxes where users might want to check or uncheck all of them. A simple button click can be user-friendly.

4. A checkbox can be checked to represent checking all checkboxes of a group, and a checkbox can be checked to represent unchecking all of them. This is useful for the same reason as number 3. Either method can be used.

First, I'll show you how to determine whether or not a checkbox has been checked and how to check and uncheck them using JavaScript.

The form must have a name. And the checkbox fields must have a name. Here is an example:

<form 
name="myform" 
method="POST" 
action="/cgi-bin/script.cgi">
<input 
type="checkbox" 
name="box1" 
value="yes1">
<input 
type="checkbox" 
name="box2" 
value="yes2">
<input 
type="submit" 
onClick="DoTheCheck()">
</form>

The above form's name is "myform". The checkbox's names are "box1" and "box2".

Here is JavaScript that will check whether or not the checkboxes are checked and display an alert box with the answer. It is function DoTheCheck() that the above form calls when the submit button is clicked. The JavaScript can be in the HEAD area or in the BODY area, so long as it is above the form it manipulates.

function DoTheCheck() {
if(document.myform.box1.checked == true)
{ alert('box1 is checked'); }
if(document.myform.box1.checked == false)
{ alert('box1 is not checked'); }
if(document.myform.box2.checked == true)
{ alert('box2 is checked'); }
if(document.myform.box2.checked == false)
{ alert('box2 is not checked'); }
}

The format is the word "document," a period, the name of the form, a period, the name of the checkbox field, a period, and the word "checked."

If you want to check a checkbox with JavaScript, use:

document.myform.box1.checked = true;

Notice that when you consult the checkbox to see whether or not it is checked, you use two consecutive equals characters; and when you assign a check to the checkbox, you use only a single equals character. The single use means "make it equal to ______." The doubled use determines "whether or not it already is equal to ______."

If you want to un-check a checkbox with JavaScript, use:

document.myform.box1.checked = false;

Now you know how to determine whether or not a checkbox is already checked and you can check or uncheck it.

Before we present the examples, let's learn how to determine the value of a checkbox.

Simply replace the word "checkbox" with the word "value". The value is the value as specified in the form itself (unless JavaScript is used to change that value). When you consult the checkbox to determine its value, it will provide the value whether or not it is checked. For example, this will display an alert box with the value of box1 as the message:

alert(document.myform.box1.value);

To display the alert box only if the checkbox is checked, do this:

if(document.myform.box1.checked == true)
{ alert(document.myform.box1.value); }

If you need to change the value of a checkbox with JavaScript, do something like this:

document.myform.box1.value = "new value";

Now, let's talk about the four examples.

Please download the demonstration JavaScript before proceeding. The demo page has a link to a bare demonstration page, which you can save to your hard drive, and it has a link to a ZIP file with the same bare demonstration page. See Checkbox Controls with JavaScript.

The following are short descriptions of each demonstration form and it's JavaScript. The demonstrations can be modified as you see fit.

1. Limiting the Number of Checkboxes

The demonstration has checkboxes representing six colors, and the user is asked to select up to three. If the user tries to select more than three, an alert box reminder is displayed.

The JavaScript is function CountChecks(). It scans each checkbox to determine whether or not it's checked. If more than three checkboxes are checked, it

1. Unchecks the last one that was checked by the user, and then

2. Displays the alert box.

2. Totaling the Value of Checked Checkboxes

The demonstration has checkboxes representing four items, with prices ranging from 0.00 to 55.00. There is also a text field. That text field is automatically updated with the total values of all checked checkboxes, every time one is checked or unchecked.

The JavaScript is TotalCheckedValues(). It does the following actions:

1. Scans each checkbox to determine whether or not it is checked,

2. Adds each checked value to a running total,

3. Formats the total into a currency decimal number, and

4. Displays the total in the form's text field.

3. Checking or Unchecking a Group of Checkboxes

The demonstration has checkboxes representing three colors. It also has two buttons, "Check All" and "Un-check All."

The checkboxes can be checked and unchecked individually. The two buttons cause all to be checked and all to be unchecked, respectively.

The JavaScript is two functions, CheckAll() and UnCheckAll().

When the "Check All" button is clicked, function CheckAll() checks all checkboxes. And when the "Un-check All" button is clicked, function UnCheckAll() unchecks all checkboxes.

4. "All" and "None" Checkboxes

The demonstration has checkboxes representing three colors, plus "All" and "None." The "None" checkbox is pre-checked.

The checkboxes representing the three colors can be checked and unchecked individually. If the "All" or the "None" checkbox is checked, all other checkboxes become unchecked.

There will always be at least one checkbox checked.

• If "All" or "None" are checked, everything else is unchecked.

• If any one or more of the colors are checked, both "All" and "None" are unchecked.

• Whenever there is a situation where no checkbox would otherwise be checked, "None" automatically becomes checked.

The JavaScript is four functions, UpdateChecks(), AllIsChecked(), NoneIsChecked(), and BoxesCheck().

The function UpdateChecks() is called every time a checkbox is checked or unchecked. When that function is called, it knows which was checked/unchecked, either the "All," the "None," or one of the color checkboxes.

1. If it was the "All" checkbox, function AllIsChecked() is called.

1. If the "All" checkbox happens to be unchecked at the time the function is called, then the function BoxesCheck() is called to handle the situation (see c., below).

2. If the "All" checkbox happens to be checked, all others are unchecked.

2. If it was the "None" checkbox, function NoneIsChecked() is called.

1. If the "None" checkbox happens to be unchecked at the time the function is called, then the function BoxesCheck() is called to handle the situation (see c., below).

2. If the "None" checkbox happens to be checked, all others are unchecked.

3. If it was one of the color checkboxes, function BoxesCheck() is called. It

1. Unchecks the "All" checkbox.

2. Unchecks the "None" checkbox.

3. If all the colors are checked, then it

1. Checks the "All" checkbox, and

2. Calls the AllIsChecked() function.

4. If all the colors are unchecked, then it

1. Checks the "None" checkbox, and

2. Calls the NoneIsChecked() function.

Now you're on your way to becoming an expert with JavaScript and form checkboxes. It can take a bit of practice, and some trial and error. But once it's understood, you have a skill that can become useful time and again.

Will Bontrager