JS获取表单元素的值

1<html>
2<head>
3<meta http-equiv="content-type" content="text/html;charset=utf-8">
4<title>测试</title>
5</head>
6<body>
7<form id="form1" name="form1">
8文本框 ：<input type="text" id="txt" value="txt" />
9<br />
10单选按钮：<input type="radio" value="男" name="sex" />男    <input type="radio" value="女" name="sex"  checked="checked"/>女
11<br />
12复选框：<input type="checkbox" value="1"  name="check[]"/>1<input type="checkbox" value="2" checked="checked"  name="check[]" />2<input type="checkbox" value="3" checked="checked"  name="check[]" />3
13<br />    
14下拉框：
15<select id="sel" style="width: 100px">
16<option value="yi">1</option>
17<option value="er" selected="selected">2</option>
18<option value="san">3</option>
19</select>
20<br />
21<input type="button" value="获取"  onclick="getVal()"/>
22</form>
23
24<script type="text/javascript">
25
26function getVal(){
27	var str="";
28	//获取单选按钮的值
29	var radios = document.form1.sex;
30	var n = radios.length;
31	for (var i = 0; i < n; i++) {
32		if (radios[i].checked) {
33			str = " 单选 "+radios[i].value;
34		}
35	}
36
37	//获取复选框中选中的值的组合 1,2,3,4 
38	var checkboxs = document.getElementsByName('check[]');
39	var n = checkboxs.length;
40	for (var i = 0; i < n; i++) {
41		if (checkboxs[i].checked) {
42			str += " 复选框 "+checkboxs[i].value;
43		}
44	}
45
46	//获取下拉列表的选中项的值
47	//方法一：
48	str += " 列表 一："+document.getElementById("sel").value;
49
50	//方法二：
51	var sel = document.getElementById("sel");
52	str += " 列表 二："+sel.options[sel.selectedIndex].value;
53	
54	alert(str);
55
56}
57</script>
58</body>
59</html>

评论区

加载中...

JS获取表单元素的值

评论区

相关推荐