📄 day5_7.html
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript教程</title>
<script language="JavaScript">
<!-- hide me
function switchLight()
{
var the_box = window.document.form_2.check_1;
if (the_box.checked == false) {
document.bgColor='black';
alert("Hey! Turn that back on!");
} else {
document.bgColor='white';
alert("Thanks!");
}
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript教程 - 第五课</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left"><small><small><br>
</small></small><strong>第七页：<font SIZE="3">复选框</font></strong> <p
ALIGN="JUSTIFY"> </p>
<table border="0" cellspacing="0" cellpadding="0" width="428">
<tr>
<td width="428"><font SIZE="3">文字域和文字区域是表单的两种元素。其它的还有复选<br>
框、单选框及下拉菜单。首先我们学习复选框。 <p>复选框的主要属性就是：被选中（<font
face="宋体">checked</font>）。 </p>
<form>
<p><input type="checkbox" name="foo" checked value="ON"> <font face="宋体">This checkbox
is checked<br>
<input type="checkbox" name="bar" value="ON"> This checkbox is not checked<br>
</font></font></p>
</form>
<p><font SIZE="3">如果有一个名为<font face="宋体">the_form</font>的表单，其中一个复选框的名称<br>
为<font face="宋体"><tt>the_checkbox</tt></font>，你可一看到如果点击该复选框会发生什<br>
么情况：</font></p>
<font size="2"><p><font size="2"><br>
<!-- AUTHOR TAGLINE --> </font></font></td>
</tr>
</table>
<ul>
<pre><font face="宋体"><big>var is_checked = </big>
<big>window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}
</big></font></pre>
</ul>
<table width="431" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="431"><font SIZE="3">如果复选框被选中，则复选框的属性为真<font
face="宋体"><tt>(true</tt></font>）。<br>
真（<font face="宋体"><tt>true</tt></font>）是<font face="宋体">JavaScript</font>内置的数据类型，所以你不必<br>
对<font face="宋体">true</font>添加引号。如果复选框未被选中，则其属性为<br>
假（<font face="宋体">false</font>），这也是一只内置数据类型。 <p>你还可以设定复选框的属性。以下是设置复选框属性的一<br>
个例子：</p>
<form name="form_1">
<p><input type="checkbox" name="check_1" value="ON"> <font face="宋体">Checkbox 1<br>
</font></p>
</form>
<p><font face="宋体"><a href="#"
onClick="window.document.form_1.check_1.checked=true; return false;">Click to check
Checkbox 1</a> <br>
<a href="#" onClick="window.document.form_1.check_1.checked=false; return false;">Click to
uncheck Checkbox 1</a> <br>
<a href="#" onClick="alert(window.document.form_1.check_1.checked); return false;">Click
to see the value of Checkbox 1</a> </font></p>
<p>以下为代码： </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体"><big>
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#" </big>
<big>onClick=</big>
<big>"window.document.form_1.check_1.checked=true; </big>
<big>return false;"></big>
<big>Click to check Checkbox 1</a>
<a href="#" </big>
<big>onClick=</big>
<big>"window.document.form_1.check_1.checked=false; </big>
<big>return false;"></big>
<big>Click to uncheck Checkbox 1</a>
<a href="#" </big>
<big>onClick="alert(window.document.form_1.check_1.checked); return false;"></big>
<big>Click to see the value of Checkbox 1</a>
</big></font></pre>
</ul>
<table width="429" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="429"><font SIZE="3">注意我在链接中始终加入了<font face="宋体"><tt>return
false</tt></font>，以防止浏览器<br>
刷新页面又回到原来的内容。 <p>复选框的事件处理器是<font
face="宋体"><tt>onClick</tt></font>。当某人点击复选框<br>
时，<font face="宋体"><tt>onClick</tt></font>事件处理器即发挥作用。以下为其使用实例。</p>
<form name="form_2">
<font color="red"><p><input type="checkbox" name="check_1" checked
onClick="switchLight();" value="ON"> <font face="宋体">The Light Switch </font></p>
</font>
</form>
<p>该例子中，表单应用了<font face="宋体"><tt>onClick</tt></font>复选框处理器：
</font></td>
</tr>
</table>
<ul>
<pre><font face="宋体"><big>
<form name="form_2">
<input type="checkbox" name ="check_1" </big>
<big>onClick="switchLight();">The Light Switch
</form>
</big></font></pre>
</ul>
<table width="429" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="429"><font face="宋体" size="3">当某人点击复选框时，<tt>onClick</tt>处理器被激活并执行函<br>
数<tt>switchLight()</tt>，以下为函数<tt>switchLight()</tt> 的编码（它<br>
置于网页首部中): </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
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';
}
}
</font></pre>
</ul>
<table width="424" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="424">第一行：<font face="宋体"> </font></td>
</tr>
</table>
<ul>
<pre><font face="宋体">
var the_box = window.document.form_2.check_1;
</font></pre>
</ul>
<table width="421" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="421">将复选框对象赋值给一个变量。这样可以缩小编程长度，<br>
还可以将对象作为参数传递给函数。<font face="宋体"> </font></td>
</tr>
</table>
<p align="left"><br>
<a href="day5_8.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_8.html">>></a></p>
<p align="left"><strong><font face="宋体" size="3" color="#000000">JavaScript教程</font></strong><font
color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF0000">第一页</font> <a href="day5_7.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_7.html">第五课课程介绍</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_2.html">介绍反馈表单</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_3.html">控制文字域的值</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_4.html">文字域事件</a><br>
<font color="#FF0000">第五页</font> <a href="day5_5.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_5.html">反馈表单处理器</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_6.html">文字域的练习</a><br>
<font color="#FF0000">第七页</font> 复选框<br>
<font color="#FF0000">第八页</font> <a href="day5_8.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_8.html">单选框</a><br>
<font color="#FF0000">第九页</font> <a href="day5_9.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_9.html">选单</a><br>
<font color="#FF0000">第十页</font> <a href="day5_10.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_10.html">在选单中应用<font
face="宋体">onchange</font>命令</a></font></p>
<p align="left"><font face="宋体" size="3">[<a href="index.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/index.html">第1课</a>][<a
href="day2_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day2_1.html">第2课</a>][<a href="day3_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day3_1.html">第3课</a>][<a href="day4_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day4_1.html">第4课</a>][第5课]</font></p>
<hr align="left">
<p><font size="2">本文由<a href="javascript:if(confirm('http://chd.126.com/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://chd.126.com/'" tppabs="http://chd.126.com/" target="_blank">《</font><font
face="verdana, arial, geneva, sans-serif" size="2">CHD</font><font size="2">的网络教室》</a>根据<a
href="javascript:if(confirm('http://www.webmonkey.com.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.webmonkey.com.cn/'" tppabs="http://www.webmonkey.com.cn/" target="_blank">《网猴》</a>相关文章改编，版权归<a
href="javascript:if(confirm('http://www.webmonkey.com.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.webmonkey.com.cn/'" tppabs="http://www.webmonkey.com.cn/" target="_blank">《网猴》</a>所有</font></td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -