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

浏览数：19 / 时间：2015年06月09日

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

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

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