Controlling HTML Checkboxes within Your Web Page
By
William
Bontrager
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 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
a. Unchecks the last one that was checked by the user, and then
b. 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:
a. Scans each checkbox to determine whether or not it is checked,
b. Adds each checked value to a running total,
c. Formats the total into a currency decimal number, and
d. 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.
a. If it was the "All" checkbox, function
AllIsChecked() is called.
i. 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).
ii. If the "All" checkbox happens to be checked,
all others are unchecked.
b. If it was the "None" checkbox, function
NoneIsChecked() is called.
i. 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).
ii. If the "None" checkbox happens to be checked,
all others are unchecked.
c. If it was one of the color checkboxes, function
BoxesCheck() is called. It
i. Unchecks the "All" checkbox.
ii. Unchecks the "None" checkbox.
iii. If all the colors are checked, then it
A. Checks the "All" checkbox, and
B. Calls the AllIsChecked() function.
iv. If all the colors are unchecked, then it
A. Checks the "None" checkbox, and
B. 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
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
