Controlling Checkboxes with JavaScript

By Will Bontrager
2005-06-29


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. The URL is http://willmaster.com/a/17/pl.pl?art177

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

Tutorial Pages:
» Controlling Checkboxes with JavaScript
» Limiting the Number of Checkboxes
» Totaling the Value of Checked Checkboxes
» Checking or Unchecking a Group of Checkboxes
» "All" and "None" Checkboxes


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » JavaScript Debugging Techniques with Firebug » Striped Tables Using JavaScript » Opening PDFs in a New Window with JavaScript » Essential Javascript -- A Javascript Tutorial » Submit Forms Conditionally using JavaScript » How to Setup a Randomising Function