javascript入门·表单和表单元素二 （文本相关，按钮，单、复选按钮）

文本相关对象：就是每个与文本相关的HTML元素（文本，密码，隐藏域，文本域等）这些东东其实只有两个属性被重视（确切说是被我重视）onchenge和value，前者调用函数，后者求、赋值，在AJAX&javascript入门系列这之前的实例中已经用了很多次了，这里就简单演示一个了！

演示一 ： 在另外文本域显示密码（在前面密码框输入你的银行密码）

前面输入的是

按钮对象：没什么说的，看下演示咯，其实按钮用得最多的还是 onclick

演示二：改变按钮上的文字以及状态

复选框对象：其实这个在http://www.cnblogs.com/thcjp/archive/2006/08/08/471565.html 一文里面已经有演示了，这里大概说下，复选框的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&amp;javascript入门系列</a></strong>这之前的实例中已经用了很多次了，这里就简单演示一个了！</p>
<p><strong>演示一 ： 在另外文本域显示密码</strong>（在前面密码框输入你的银行密码）</p>
<p>
  <input type="password" name="pwd" onchange="txt()" />
  前面输入的是
  <textarea name="txt"></textarea>
</p>
<hr>
<p><strong>按钮对象</strong>：没什么说的，看下演示咯，其实按钮用得最多的还是 onclick </p>
<p><strong>演示二：改变按钮上的文字以及状态</strong></p>
<p><strong>
  <input type="submit" name="submm" value="提交" onclick="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="天轰穿" onclick="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" onsubmit="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="提交" onclick="vote()" /></td>
  </tr>
</table>
<hr />
</form>
</body>
</html>
posted @ 2007-11-27 14:26  曹振华  阅读(339)  评论(0)  编辑  收藏  举报