JavaScript初级教程(第五课)

    文字域和文字区域是表单的两种元素。其它的还有复选框、单选框及下拉菜单。首先我们学习复选框。

    复选框的主要属性就是：被选中（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），这也是一只内置数据类型。

    你还可以设定复选框的属性。以下是设置复选框属性的一个例子：

    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事件处理器即发挥作用。以下为其使用实例。

    该例子中，表单应用了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;

    将复选框对象赋值给一个变量。这样可以缩小编程长度，还可以将对象作为参数传递给函数。

    下一讲我们将要讲解单选框的有关知识。

最新评论