📄 tutorial5_page7.htm
字号:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
<title>Webmonkey: javascript: Thau's JavaScript Tutorial: Day 1</title>
<meta NAME="keywords"
CONTENT="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder, pag">
<meta NAME="description"
CONTENT="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta NAME="Template" CONTENT="E:\LIZEJUN\OFFICE\html.dot">
</head>
<body TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff">
<table CELLSPACING="0" BORDER="0" CELLPADDING="3" WIDTH="959">
<tr>
<td WIDTH="79%" VALIGN="MIDDLE"><font FACE="宋体" LANG="ZH-CN" SIZE="4" COLOR="#ff0000"></font><b><font
FACE="System,黑体" LANG="ZH-CN" SIZE="5" COLOR="#ff0000">第</font><font FACE="宋体"
LANG="ZH-CN" SIZE="5" COLOR="#ff0000">7</font><font FACE="System,黑体" LANG="ZH-CN"
SIZE="5" COLOR="#ff0000">页：复选框</font></b><font FACE="System,黑体" LANG="ZH-CN"><br>
<!-- BYLINE --> </font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2">作者：</font><a
HREF="mailto:thau@wired.com"><font FACE="宋体" LANG="ZH-CN" SIZE="2">Thau!</font></a><font
FACE="宋体" LANG="ZH-CN"> <!-- SEE ALSO LINKS --></font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">文字域和文字区域是表单的两种元素。其它的还有<br>
复选框、单选框及下拉菜单。首先我们学习复选<br>
框。<p>复选框的主要属性就是：被选中（</font><font FACE="宋体"
LANG="ZH-CN">checked</font><font FACE="System,黑体" LANG="ZH-CN">）。</font> </p>
<form>
<font FACE="System,黑体" LANG="ZH-CN"><p><input TYPE="checkbox" CHECKED NAME="foo"
VALUE="ON"> </font><font FACE="宋体" LANG="ZH-CN">This checkbox is checked<br>
<input TYPE="checkbox" NAME="bar" VALUE="ON"> This checkbox is not checked</font></p>
</form>
<font FACE="System,黑体" LANG="ZH-CN"><p>如果有一个名为</font><font FACE="宋体"
LANG="ZH-CN">the_form</font><font FACE="System,黑体" LANG="ZH-CN">的表单，其中一个复选框<br>
的名称为</font><tt>the_checkbox</tt><font FACE="System,黑体" LANG="ZH-CN">，你可一看到如果点击该复<br>
选框会发生什么情况：</p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<big><p>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."); } </big></p>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">如果复选框被选中，则复选框的属性为真</font><tt>(true</tt><font
FACE="System,黑体" LANG="ZH-CN">）。真（</font><tt>true</tt><font
FACE="System,黑体" LANG="ZH-CN">）是</font><font FACE="宋体" LANG="ZH-CN">JavaScript</font><font
FACE="System,黑体" LANG="ZH-CN">内置的数据类型，所以你不必对</font><font
FACE="宋体" LANG="ZH-CN">true</font><font FACE="System,黑体" LANG="ZH-CN">添加引号。如果复选框未被选中，则其属性为假（</font><font
FACE="宋体" LANG="ZH-CN">false</font><font FACE="System,黑体" LANG="ZH-CN">），这也是一只内置数据类型。</font>
<font FACE="System,黑体" LANG="ZH-CN"><p>你还可以设定复选框的属性。以下是设置复选框属性的一个例子：</p>
<form>
<p><input TYPE="checkbox" NAME="check_1" VALUE="ON"> </font><font FACE="宋体"
LANG="ZH-CN">Checkbox 1</font></p>
</form>
<font FACE="System,黑体" LANG="ZH-CN"><p></font><font FACE="宋体" LANG="ZH-CN"><a
HREF="#"><b>错误！超级链接引用无效。</b></a> <br>
<a HREF="#"><b>错误！超级链接引用无效。</b></a> <br>
<a HREF="#"><b>错误！超级链接引用无效。</b></a> </p>
</font><font FACE="System,黑体" LANG="ZH-CN"><p>以下为代码：</font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><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></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">注意我在链接中始终加入了</font><tt>return
false</tt><font FACE="System,黑体" LANG="ZH-CN">，以防止浏览器刷新页面又回到原来的内容。</font>
<font FACE="System,黑体" LANG="ZH-CN"><p>复选框的事件处理器是</font><tt>onClick</tt><font
FACE="System,黑体" LANG="ZH-CN">。当某人点击复选框时，</font><tt>onClick</tt><font
FACE="System,黑体" LANG="ZH-CN">事件处理器即发挥作用。以下为其使用实例。</p>
<form>
</font><font FACE="System,黑体" LANG="ZH-CN" COLOR="#ff0000"><p><input TYPE="checkbox"
CHECKED NAME="check_1" VALUE="ON"> </font><font FACE="宋体" LANG="ZH-CN" COLOR="#ff0000">The
Light Switch </font></p>
</form>
<font FACE="System,黑体" LANG="ZH-CN"><p>该例子中，表单应用了</font><tt>onClick</tt><font
FACE="System,黑体" LANG="ZH-CN">复选框处理器：</font> </td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>
<form name="form_2">
<input type="checkbox" name ="check_1" </big>
<big>onClick="switchLight();">The Light Switch
</form>
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">当某人点击复选框时，</font><tt>onClick</tt><font
FACE="System,黑体" LANG="ZH-CN">处理器被激活并执行函数</font><tt>switchLight()</tt><font
FACE="System,黑体" LANG="ZH-CN">，以下为函数</font><tt>switchLight()</tt><font
FACE="宋体" LANG="ZH-CN"> </font><font FACE="System,黑体" LANG="ZH-CN">的编码（它置于网页首部中</font><font
FACE="宋体" LANG="ZH-CN">): </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
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';
}
}
</pre>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"></font><font
FACE="System,黑体" LANG="ZH-CN" SIZE="2">第一行：</font><font FACE="宋体"
LANG="ZH-CN" SIZE="2"> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><pre>
var the_box = window.document.form_2.check_1;
</pre>
</td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"></font><font
FACE="System,黑体" LANG="ZH-CN" SIZE="2">将复选框对象赋值给一个变量。这样可以缩小编程长度，还可以将对象作为参数传递给函数。</font><font
FACE="宋体" LANG="ZH-CN" SIZE="2"> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="TOP" BGCOLOR="#ffffff"><!-- PAGE X LINKS --><font FACE="System,黑体" LANG="ZH-CN"><p>第</font><font
FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page1.htm">第</font><font FACE="宋体" LANG="ZH-CN">5</font><font
FACE="System,黑体" LANG="ZH-CN">日课程介绍</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page2.htm">介绍反馈表单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">3</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page3.htm">控制文字域的值</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">4</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page4.htm">文字域事件</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">5</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page5.htm">反馈表单处理器</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">6</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page6.htm">文字域的练习</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">7</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page7.htm">复选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">8</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page8.htm">单选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">9</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page9.htm">选单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">10</font><font FACE="System,黑体"
LANG="ZH-CN">页：<a HREF="tutorial5_page10.htm">在选单中应用</font><font
FACE="宋体" LANG="ZH-CN">onchange</font><font FACE="System,黑体" LANG="ZH-CN">命令</a><br>
</p>
<p><br>
</p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> </font></td>
</tr>
<tr>
<td WIDTH="79%" VALIGN="MIDDLE"></td>
</tr>
</table>
<font FACE="System,黑体" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -