📄 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 mefunction 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://sun150-2.fimmu.edu.cn/doing/js1/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://sun150-2.fimmu.edu.cn/doing/js1/day5_7.html">第五课课程介绍</a><br> <font color="#FF0000">第二页</font> <a href="day5_2.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_2.html">介绍反馈表单</a><br> <font color="#FF0000">第三页</font> <a href="day5_3.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_3.html">控制文字域的值</a><br> <font color="#FF0000">第四页</font> <a href="day5_4.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_4.html">文字域事件</a><br> <font color="#FF0000">第五页</font> <a href="day5_5.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_5.html">反馈表单处理器</a><br> <font color="#FF0000">第六页</font> <a href="day5_6.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_6.html">文字域的练习</a><br> <font color="#FF0000">第七页</font> 复选框<br> <font color="#FF0000">第八页</font> <a href="day5_8.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_8.html">单选框</a><br> <font color="#FF0000">第九页</font> <a href="day5_9.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_9.html">选单</a><br> <font color="#FF0000">第十页</font> <a href="day5_10.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_10.html">在选单中应用<font face="宋体">onchange</font>命令</a></font></p> <p align="left"><font face="宋体" size="3">[<a href="index.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/index.html">第1课</a>][<a href="day2_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day2_1.html">第2课</a>][<a href="day3_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day3_1.html">第3课</a>][<a href="day4_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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 + -