javascript入门·表单和表单元素二 (文本相关,按钮,单、复选按钮) .txt

    技术2022-05-11  41

    文本相关对象:就是每个与文本相关的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> 


    最新回复(0)