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 >