您的位置：首页 > Web前端 > JavaScript

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

2014-02-10 18:28 501 查看

<html>
<head>
<title>dsd</title>
<script language="JavaScript">
function show1(){
var name=document.myform.name.value    //保存姓名
alert("姓名"+name);
var sex;                               //保存性别
if(document.myform.sex[0].checked){   //如果第一个元素被选中
sex=document.myform.sex[0].value;
}else {sex=document.myform.sex[1].value;}
alert("性别"+sex);
var ints="";                            //保存爱好
for(i=0;i<=document.myform.int.Length;i++)
if(document.myform.int[i].checked)       //判断是否被选中
ints+=document.myform.int[i].value;
alert("爱好"+ints);
}
function show2(val){                  //修改文本框显示
document.myform.result.value=val;

}
</script>
</head>
<body>
<form action=""method="post"name=myform>
姓名：<input type="text"name="name"><br>
性别：<input type="radio"name="sex" value="男">男
<input type="radio"name="sex" value="女">女<br>
<input type="checkbox"name="int" value="唱歌">唱歌
<input type="checkbox"name="int" value="睡觉">睡觉
<input type="checkbox"name="int" value="吃饭">吃饭<br>
<input type="button"value="显示"onclick="show1()"><br>
部门：<select name="dept" onChange="show2(this.value)">  //触发事件传递到show2（）中
<option value="产品部">产品部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select>
结果：<input type="text" name="result" value="">

</body>
</html>

本程序在表单分别定义了文本框单选按钮复选按钮如果两个单选按钮名称一样，则要采用数组形式分别判断哪个控件被选中；多了可通过循环方式取出每一个选中的内容。
本程序还定义了一个下拉菜单和一个文本框，在下拉框列表中一旦触发onchange事件，则会将当前选中的结果this.value传递到show2()函数中，并在函数中设置内容显示到文本框中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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