The text field and the text area are two elements of the form. Others include check boxes, radio boxes and drop-down menus. First we learn the checkbox.
The main attribute of the check box is: checked.
If there is a form named the_form, with one of the checkboxes named the_checkbox, you can see what happens if you click the checkbox:
var is_checked = .the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}
If the check box is selected, the property of the check box is true (true). True is a built-in data type in JavaScript, so you don't have to add quotes to true. If the check box is not selected, its attribute is false, which is also a built-in data type.
You can also set the properties of the check box. Here is an example of setting checkbox properties:
Click to check Checkbox 1
Click to uncheck Checkbox 1
Click to see the value of Checkbox 1
The following is the code:
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#" onClick=".form_1.check_1.checked=true;return false;">Click to check Checkbox 1</a>
<a href="#" onClick=".form_1.check_1.checked=false;return false;">Click to uncheck Checkbox1</a>
<a href="#" onClick="alert(.form_1.check_1.checked);return false;">Click to see the value of Checkbox 1</a>
Note that I always include return false in the link to prevent the browser from refreshing the page and returning to the original content. The event handler for the checkbox is onClick. The onClick event handler works when someone clicks the check box. The following are examples of their use.
In this example, the form applies the onClick checkbox processor:
<form name="form_2">
<input type="checkbox" name ="check_1" onClick="switchLight();">The Light Switch
</form>
When someone clicks the checkbox, the onClick processor is activated and the function switchLight() is executed. The following is the encoding of the function switchLight() (it is placed in the header of the web page):
function switchLight()
{
var the_box = .form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
='black';
} else {
alert("Thanks!");
='white';
}
}
Line 1:
var the_box = .form_2.check_1;
Assign the checkbox object to a variable. This will reduce the programming length and pass objects as parameters to functions.
In the next lecture, we will explain the relevant knowledge of the single-choice box.