文本相关对象:就是每个与文本相关的HTML元素(文本,密码,隐藏域,文本域等)这些东东其实只有两个属性被重视(确切说是被我重视)onchenge和value,前者调用函数,后者求、赋值,在AJAX&javascript入门系列这之前的实例中已经用了很多次了,这里就简单演示一个了!
演示一 : 在另外文本域显示密码(在前面密码框输入你的银行密码)
前面输入的是
--------------------------------------------------------------------------------
按钮对象:没什么说的,看下演示咯,其实按钮用得最多的还是 onclick
演示二:改变按钮上的文字以及状态
--------------------------------------------------------------------------------
复选框对象:其实这个一文里面已经有演示了,这里大概说下,复选框的value是个很特殊的东西,他不可见,但是相对脚本来说却非常重要,复选框最重要的一个属性当然还是选中与否的 checked 这个属性返回Boolean值!
演示三 :没啥子说的,你选下下面这个复选框再取消选择就知道了
--------------------------------------------------------------------------------
单选按纽对象:单选按纽有个毛病,要使他们在一组,就必须给他们相同的名字,当你使用同名字制定了一组按钮后,页面载入后也会将同名字的一组元素作为一个数组处理,这样以来,我们就可以使用 document.formname.groupname.length 的方式得出该组有多少元素,同理,可以使用 document.formname.groupname[index].checked 来判断当前元素是否被选中 。
演示四:显示两组按钮中都分别显示选择了什么
第一组 第二组 大甜甜 小甜甜 老甜甜 老不死 打不死 小不死
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表单和表单元素(文本相关,按钮,单、复选按钮)</title><script language="javascript">function txt(){//改变文本框的值 document.getElementById("txt").value=document.getElementById("pwd").value;}function subm(){//改变按钮上的字 document.all.submm.value="你按过我了";//该行使用了一种比较老的查找控件的方法 document.getElementById("submm").disabled=true;//将按钮设置为可见不可用状态}function chk(){ var chhkk=document.all.chkname;//将复选框对象赋给变量chhkk,方便以后的多次引用 if(chhkk.checked){//如果被选中了 alert("感谢选举"+ chhkk.value )//弹出提醒对话框,包含复选框的值 } else{ alert("你有本事,敢不选"+ chhkk.value) } }function vote(){ var form=document.rad;
for(var i=0;i<form.onerad.length;i++){ if(form.onerad[i].checked){ break } } for(var j=0;j<form.tworad.length;j++){ if(form.tworad[j].checked){ break; } } alert(form.onerad[i].value +"vs"+ form.tworad[j].value)}</script></head>
<body><p><strong>文本相关对象</strong>:就是每个与文本相关的HTML元素(文本,密码,隐藏域,文本域等)这些东东其实只有两个属性被重视(确切说是被我重视)onchenge和value,前者调用函数,后者求、赋值,在<strong><a href="http://www.cnblogs.com/thcjp/category/65304.html">AJAX&javascript入门系列</a></strong>这之前的实例中已经用了很多次了,这里就简单演示一个了!</p><p><strong>演示一 : 在另外文本域显示密码</strong>(在前面密码框输入你的银行密码)</p><p> <input type="password" name="pwd" οnchange="txt()" /> 前面输入的是 <textarea name="txt"></textarea></p><hr><p><strong>按钮对象</strong>:没什么说的,看下演示咯,其实按钮用得最多的还是 onclick </p><p><strong>演示二:改变按钮上的文字以及状态</strong></p><p><strong> <input type="submit" name="submm" value="提交" οnclick="subm()" /></strong></p><hr /><p><strong>复选框对象</strong>:其实这个在<a href="http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html">http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html</a> 一文里面已经有演示了,这里大概说下,复选框的value是个很特殊的东西,他不可见,但是相对脚本来说却非常重要,复选框最重要的一个属性当然还是选中与否的 checked 这个属性返回Boolean值!</p><p><strong>演示三 :没啥子说的,你选下下面这个复选框再取消选择就知道了</strong></p><p> <input type="checkbox" name="chkname" value="天轰穿" οnclick="chk()" /></p><hr /><p><strong>单选按纽对象</strong>:单选按纽有个毛病,要使他们在一组,就必须给他们相同的名字,当你使用同名字制定了一组按钮后,页面载入后也会将同名字的一组元素作为一个数<br />组处理,这样以来,我们就可以使用 <strong>document.formname.groupname.length</strong> 的方式得出该组有多少元素,同理,可以使用 <strong>document.formname.groupname[index].checked</strong> 来判断当前元素是否被选中 。</p><p><strong>演示四:显示两组按钮中都分别显示选择了什么 </strong></p><form name="rad" οnsubmit="return false"><table width="400" border="0" cellspacing="0" cellpadding="5"> <tr> <td align="center" bgcolor="#CDCDCD">第一组</td> <td align="center">第二组</td> </tr> <tr> <td bgcolor="#CDCDCD"><table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="73">大甜甜</td> <td width="107"><input type="radio" name="onerad" value="大甜甜" /></td> </tr> <tr> <td>小甜甜</td> <td><input type="radio" name="onerad" value="小甜甜" /></td> </tr> <tr> <td>老甜甜</td> <td><input type="radio" name="onerad" value="老甜甜" /></td> </tr> </table></td> <td><table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="67">老不死</td> <td width="113"><input type="radio" name="tworad" value="老不死" /></td> </tr> <tr> <td>打不死</td> <td><input type="radio" name="tworad" value="打不死" /></td> </tr> <tr> <td>小不死</td> <td><input type="radio" name="tworad" value="小不死" /></td> </tr> </table></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="Submit" value="提交" οnclick="vote()" /></td> </tr></table><hr /></form></body></html>