快捷導(dǎo)航

JavaScript初級(jí)教程(第五課)

更新時(shí)間：2007年04月05日 00:00:00 作者：

文字域和文字區(qū)域是表單的兩種元素。其它的還有復(fù)選框、單選框及下拉菜單。首先我們學(xué)習(xí)復(fù)選框。

復(fù)選框的主要屬性就是：被選中（checked）。

如果有一個(gè)名為the_form的表單，其中一個(gè)復(fù)選框的名稱為the_checkbox，你可以看到如果點(diǎn)擊該復(fù)選框會(huì)發(fā)生什么情況：

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.");
    }

如果復(fù)選框被選中，則復(fù)選框的屬性為真(true）。真（true）是JavaScript內(nèi)置的數(shù)據(jù)類型，所以你不必對(duì)true添加引號(hào)。如果復(fù)選框未被選中，則其屬性為假（false），這也是一只內(nèi)置數(shù)據(jù)類型。

你還可以設(shè)定復(fù)選框的屬性。以下是設(shè)置復(fù)選框?qū)傩缘囊粋€(gè)例子：

    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 Checkbox1</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，以防止瀏覽器刷新頁(yè)面又回到原來(lái)的內(nèi)容。復(fù)選框的事件處理器是onClick。當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick事件處理器即發(fā)揮作用。以下為其使用實(shí)例。

該例子中，表單應(yīng)用了onClick復(fù)選框處理器：

    <form name="form_2">
        <input type="checkbox" name ="check_1" onClick="switchLight();">The Light Switch
    </form>

當(dāng)某人點(diǎn)擊復(fù)選框時(shí)，onClick處理器被激活并執(zhí)行函數(shù)switchLight()，以下為函數(shù)switchLight() 的編碼（它置于網(wǎng)頁(yè)首部中):

    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;

將復(fù)選框?qū)ο筚x值給一個(gè)變量。這樣可以縮小編程長(zhǎng)度，還可以將對(duì)象作為參數(shù)傳遞給函數(shù)。

下一講我們將要講解單選框的有關(guān)知識(shí)。