1 <html> 2 <head> 3 <title>dsd</title> 4 <script language="JavaScript"> 5 function show1(){ 6 var name=document.myform.name.value //保存姓名 7 alert("姓名"+name); 8 var sex; //保存性别 9 if(document.myform.sex[0].checked){ //如果第一个元素被选中 10 sex=document.myform.sex[0].value; 11 }else {sex=document.myform.sex[1].value;} 12 alert("性别"+sex); 13 var ints=""; //保存爱好 14 for(i=0;i<=document.myform.int.Length;i++) 15 if(document.myform.int[i].checked) //判断是否被选中 16 ints+=document.myform.int[i].value; 17 alert("爱好"+ints); 18 } 19 function show2(val){ //修改文本框显示 20 document.myform.result.value=val; 21 22 } 23 </script> 24 </head> 25 <body> 26 <form action=""method="post"name=myform> 27 姓名:<input type="text"name="name"><br> 28 性别:<input type="radio"name="sex" value="男">男 29 <input type="radio"name="sex" value="女">女<br> 30 <input type="checkbox"name="int" value="唱歌">唱歌 31 <input type="checkbox"name="int" value="睡觉">睡觉 32 <input type="checkbox"name="int" value="吃饭">吃饭<br> 33 <input type="button"value="显示"onclick="show1()"><br> 34 部门:<select name="dept" onChange="show2(this.value)"> //触发事件传递到show2()中 35 <option value="产品部">产品部</option> 36 <option value="销售部">销售部</option> 37 <option value="财务部">财务部</option> 38 </select> 39 结果:<input type="text" name="result" value=""> 40 41 </body> 42 </html>
本程序在表单分别定义了文本框 单选按钮 复选按钮 如果两个单选按钮名称一样,则要采用数组形式分别判断哪个控件被选中;多了可通过循环方式取出每一个选中的内容。
本程序还定义了一个下拉菜单和一个文本框,在下拉框列表中一旦触发onchange事件,则会将当前选中的结果this.value传递到show2()函数中,并在函数中设置内容显示到文本框中