JavaScript事件处理 学习(2)—单选按钮 复选框 下拉框操作

 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()函数中,并在函数中设置内容显示到文本框中

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。