📄 day5_7.html
字号:
<td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
</tr>
<tr>
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">Ping</font></a></td>
</tr>
<tr>
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr>
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr>
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">模板</a></td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#666699"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr>
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<br><!-- #EndLibraryItem --></td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip教程</title>
<strong>第七页：<font size="3">复选框</font></strong>
<p align="JUSTIFY"><font size="3"></font><font size="4"> </font></p>
<table border="0" cellspacing="0" cellpadding="0" width="428">
<tr>
<td width="428"> <font size="2"></font><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></p>
</form>
</font>
<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);<br> 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">>></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">第五课课程介绍</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html">介绍反馈表单</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">控制文字域的值</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html">文字域事件</a><br>
<font color="#FF0000">第五页</font> <a href="day5_5.html">反馈表单处理器</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">文字域的练习</a><br>
<font color="#FF0000">第七页</font> 复选框<br>
<font color="#FF0000">第八页</font> <a href="day5_8.html">单选框</a><br>
<font color="#FF0000">第九页</font> <a href="day5_9.html">选单</a><br>
<font color="#FF0000">第十页</font> <a href="day5_10.html">在选单中应用<font face="宋体">onchange</font>命令</a></font></p>
<p align="left"><font face="宋体" size="3">[<a href="index.html">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][<a href="day4_1.html">第4课</a>][第5课]</font></p>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -