 
Home
|
 
JAVA SCRIPT
| Text
fields and textareas are just two types of form elements. Others
that we'll look at in this lesson are checkboxes, radio buttons,
and selects. Let's discuss checkboxes first.
Checkboxes have one main property of interest: checked.
If you have a form named the_form and a checkbox named
the_checkbox you can see if the checkbox has been checked
like this:
|
var is_checked = window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}
|
As you can see, if a checkbox is checked, the checked property
will be true. true is a built-in JavaScript
datatype, so you don't have to put it in quotes when checking it.
If the checkbox is not checked, the checked property will be false
(also a built-in datatype).
Just like you can read the checked property, you can set the
checked property. Here's an example of checking and setting the
checked property of a checkbox:
click to check checkbox 1
click to uncheck checkbox 1
click to see the value checkbox 1
Here's the code for the above:
|
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#" onClick="window.document.form_1.check_1.checked=true; return false;">Click to check Checkbox 1</a>
<a href="#" onClick="window.document.form_1.check_1.checked=false; return false;">Click to uncheck Checkbox 1</a>
<a href="#" onClick="alert(window.document.form_1.check_1.checked); return false;">Click to see the value of Checkbox 1</a>
|
Notice that I'm sticking the return false in the href.
It stops the page from bouncing around when you click on a link.
Checkboxes have one interesting event handler: onClick.
When someone clicks on a checkbox, the onClick event
handler goes into action. Here's an example of it in use.
This example introduces a few new things. First, there's form
that introduces the onClick checkbox handler:
|
<form name="form_2">
<input type="checkbox" name ="check_1" onClick="switchLight();">The Light Switch
</form>
|
When someone clicks on the checkbox, the onClick
handler gets triggered and executes the switchLight()
function. Here's the switchLight() function (it's in the
header of this page):
|
function switchLight()
{
var the_box = window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
document.bgColor='black';
} else {
alert("Thanks!");
document.bgColor='white';
}
}
|
The interesting thing here is the first line:
|
var the_box = window.document.form_2.check_1;
| This
line assigns the checkbox object to a variable. This a handy way
to cut down on your typing. It's also a good way to pass objects
as parameters to functions. We'll see a lot more of that in later
lessons.
|
|
 |
