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

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

    如果有一個名為the_form的表單，其中一個復選框的名稱為the_checkbox，你可以看到如果點擊該復選框會發(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.");
    }

    如果復選框被選中，則復選框的屬性為真(true）。真（true）是JavaScript內置的數據類型，所以你不必對true添加引號。如果復選框未被選中，則其屬性為假（false），這也是一只內置數據類型。

    你還可以設定復選框的屬性。以下是設置復選框屬性的一個例子：

    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，以防止瀏覽器刷新頁面又回到原來的內容。復選框的事件處理器是onClick。當某人點擊復選框時，onClick事件處理器即發(fā)揮作用。以下為其使用實例。

    該例子中，表單應用了onClick復選框處理器：

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

    當某人點擊復選框時，onClick處理器被激活并執(zhí)行函數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;

    將復選框對象賦值給一個變量。這樣可以縮小編程長度，還可以將對象作為參數傳遞給函數。

    下一講我們將要講解單選框的有關知識。

最新評論