您的位置：寻梦网首页＞编程乐园＞JavaScript＞Javascript入门到精通
Javascript 入门到精通

第 1 天 第 2 天 第 3 天 第 4 天 第 5 天
第 7 页：复选框
作者：Thau!
文字域和文字区域是表单的两种元素。其它的还有
复选框、单选框及下拉菜单。首先我们学习复选
框。

复选框的主要属性就是：被选中（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

错误！超级链接引用无效。
错误！超级链接引用无效。
错误！超级链接引用无效。

以下为代码：

 


<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;
将复选框对象赋值给一个变量。这样可以缩小编程长度，还可以将对象作为参数传递给函数。

第1页：第5日课程介绍
第2页：介绍反馈表单
第3页：控制文字域的值
第4页：文字域事件
第5页：反馈表单处理器
第6页：文字域的练习
第7页：复选框
第8页：单选框
第9页：选单
第10页：在选单中应用onchange命令



本内容由搜狐网站（www.sohoo.com.cn）提供。