第七頁:復選框( 728 )
文字域和文字區域是表單的兩種元素。其它的還有復選框、單選框及下拉菜單。首先我們學習復選框。
復選框的主要屬性就是:被選中(checked)。
This checkbox is checked
This checkbox is not checked
如果有壹個名為the_form的表單,其中壹個復選框的名稱為the_checkbox,妳可壹看到如果點擊該復選框會發生什麽情況:
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.");
}
如果復選框被選中,則復選框的屬性為真(true)。
真(true)是JavaScript內置的數據類型,所以妳不必 對true添加引號。如果復選框未被選中,則其屬性為 假(false),這也是壹只內置數據類型。
妳還可以設定復選框的屬性。以下是設置復選框屬性的壹個例子:
Checkbox 1
Click to check Checkbox 1
Click to uncheck Checkbox 1
Click to see the value of Checkbox 1
以下為代碼:
<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>
註意我在鏈接中始終加入了return false,以防止瀏覽器刷新頁面又回到原來的內容。
復選框的事件處理器是onClick。當某人點擊復選框
時,onClick事件處理器即發揮作用。以下為其使用實例。
The Light Switch
該例子中,表單應用了onClick復選框處理器:
<form name="form_2">
<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch
</form>
當某人點擊復選框時,onClick處理器被激活並執行函
數switchLight(),以下為函數switchLight() 的編碼(它置於網頁首部中):
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';
}
}
第壹行:
var the_box = window.document.form_2.check_1;
將復選框對象賦值給壹個變量。這樣可以縮小編程長度,還可以將對象作為參數傳遞給函數。