javascript 处理表单元素

一、通过表单name属性获取<form>表单的各元素　

 1 <form id="f1">
 2 　　<input type="text" tabindex="0" name="t1" value="输入内容" />
 3 　　<input type="radio" name="r1" value="1" />
 4 　　<input type="radio" name="r1" checked value="2" />
 5 　　<input type="radio" name="r1" value="3" />
 6 </form>
 7 
 8 <script>
 9 　　function getID(id){
10 　　　　return document.getElementById(id);
11 　　};
12 
13 　　var formID = getID("f1");
14 　　console.log(formID.t1.value); // 获取name="t1"的值
15 
16 　　// 获取相同name值的一组元素
17 　　console.log(formID.r1); // 返回的是一个数组节点
18 　　for(var i=0; i<formID.r1.length; i++){
19 　　　　if(formID.r1[i].checked){
20 　　　　alert(formID.r1[i].value);
21 　　　　}
22 　　}
23 </script>

二、获取文本框的值

 1 <form id="f1">
 2 　　<input type="text" id="username" tabindex="0" name="t1" value="" />
 3 　　<input type="button" id="sendForm" value="提交" />
 4 </form>
 5 
 6 <script>
 7 　　function getID(id){
 8 　　　　return document.getElementById(id);
 9 　　};
10 
11 　　var text1 = getID("username");
12 　　var sendBtn = getID("sendForm");
13 
14 　　sendBtn.onclick = function(){
15 　　　　console.log(text1.value); // 获取文本元素的内容
16 　　}
17 </script>

三、checkbox 多选元素的处理

 1 <form id="f1">
 2 　　<input type="checkbox" name="box1" value="1111" />1111
 3 　　<input type="checkbox" name="box1" value="2222" />2222
 4 　　<input type="checkbox" name="box1" value="3333" />3333
 5 　　<input type="checkbox" name="box1" value="4444" />4444
 6 　　<input type="button" id="sendForm" value="提交" />
 7 　　<input type="button" id="allBox" value="全选" />
 8 　　<input type="button" id="reverseBox" value="反选" />
 9 </form>
10 
11 <script>
12 　　function getID(id){
13 　　　　return document.getElementById(id);
14 　　};
15 
16 　　var f1 = getID("f1").box1;
17 　　var sendForm = getID("sendForm");
18 　　var allBox = getID("allBox");
19 　　var reverseBox = getID("reverseBox");
20 　　var setVal = ""
21 
22 　　// 提取选中的元素
23 　　sendForm.onclick = function(){
24 　　　　for(var i=0; i<f1.length; i++){
25 　　　　　　if(f1[i].checked){
26 　　　　　　　　setVal += f1[i].value + ",";
27 　　　　　　}
28 　　　　}
29 　　　　console.log(setVal)
30 　　};
31 
32 　　// 全选
33 　　allBox.onclick = function(){
34 　　　　for(var i=0; i<f1.length; i++){
35 　　　　　　f1[i].checked = true;
36 　　　　}
37 　　};
38 
39 　　// 反选
40 　　reverseBox.onclick = function(){
41 　　　　for(var i=0; i<f1.length; i++){
42 　　　　　　if(f1[i].checked){
43 　　　　　　　　f1[i].checked = false;
44 　　　　　　}
45 　　　　　　else{
46 　　　　　　　　f1[i].checked = true;
47 　　　　　　}
48 　　　　}
49 　　};
50 </script>

四、radio 单选框处理

 1 <form id="f1">
 2 　　<input type="radio" name="r1" value="男" /> 男
 3 　　<input type="radio" name="r1" value="女" /> 女
 4 　　<input type="radio" name="r2" value="城市" /> 城市
 5 　　<input type="radio" name="r2" value="乡村" /> 乡村
 6 　　<input type="button" id="sendForm" value="提交" />
 7 </form>
 8 
 9 <script>
10 function getID(id){
11 　　return document.getElementById(id);
12 };
13 
14 var sex = getID("f1").r1;
15 var city = getID("f1").r2;
16 var sendForm = getID("sendForm");
17 var setR1 = "", setR2 = "";
18 
19 for(var i=0; i<sex.length; i++){　　// 侦听选择项并存储
20 　　sex[i].onclick = function(){
21 　　　　setR1 = this.value;
22 　　};
23 
24 　　city[i].onclick = function(){
25 　　　　setR2 = this.value;
26 　　}
27 }
28 
29 sendForm.onclick = function(){
30 　　if(setR1 === ""){
31 　　　　alert("请选择您的性别");
32 　　　　return false;
33 　　}
34 　　if(setR2 === ""){
35 　　　　alert("请选择所在的城市类型");
36 　　　　return false;
37 　　}
38 　　alert(setR1 + "," + setR2);
39 }
40 </script>

五、<select> 菜单

 1 <form id="f1">
 2 　　<select id="sel"></select>
 3 　　<input type="button" id="sendForm" value="提交" />
 4 </form>
 5 
 6 <script>
 7 　　var banks = [{"bankCode":"ICBC","bankName":"中国工商银行","imgURL":"images/bankimg/gs.jpg"},{"bankCode":"CCB","bankName":"中国建设银行","imgURL":"images/bankimg/js.jpg"},{"bankCode":"ABC","bankName":"中国农业银行","imgURL":"images/bankimg/ny.jpg"},{"bankCode":"BOCO-NET-B2C","bankName":"交通银行","imgURL":"images/bankimg/jt.jpg"},{"bankCode":"CMBCHINA","bankName":"招商银行","imgURL":"images/bankimg/zs.jpg"},{"bankCode":"BOC","bankName":"中国银行","imgURL":"images/bankimg/zg.jpg"},{"bankCode":"CEB","bankName":"中国光大银行","imgURL":"images/bankimg/gd.jpg"},{"bankCode":"ECITIC-NET-B2C","bankName":"中信银行","imgURL":"images/bankimg/zx.jpg"},{"bankCode":"SPDB","bankName":"浦发银行","imgURL":"images/bankimg/pf.jpg"},{"bankCode":"CMBC","bankName":"中国民生银行","imgURL":"images/bankimg/ms.jpg"},{"bankCode":"CIB","bankName":"兴业银行","imgURL":"images/bankimg/xy.jpg"},{"bankCode":"GDB","bankName":"广发银行","imgURL":"images/bankimg/gf.jpg"}];
 8 
 9 function getID(id){
10 　　return document.getElementById(id);
11 };
12 
13 var sel = getID("sel");
14 var sendBtn = getID("sendForm");
15 
16 // 填加option元素
17 function addOption(){
18 　　var addOption = "";
19 　　for(var i=0; i<banks.length; i++){
20 　　　　addOption += "<option value='" + banks[i].bankCode + "'>" + banks[i].bankName + "</option>";
21 　　}
22 　　sel.innerHTML = addOption;
23 };
24 addOption();
25 
26 // 获取当前的焦点下标和选中的值
27 sel.onchange = function(){
28 　　var _index = sel.selectedIndex;
29 　　console.log("下标:" +_index);
30 　　var _val = sel.options[_index].value;
31 　　console.log("选中的值:" + _val);
32 }
33 </script>

1、select默认是inline元素，你可以
　　select
　　{
　　　　display:block;
　　}

2、默认select会选择第一项option，如果初始状态不选可以：
　　jq写法： $("select").each(function(){this.selectedIndex=-1});

　　或者干脆加个冗余option：
　　 <select>
  　　<option>请选择网站...</option>
  　　<option value="http://www.qq.com">腾讯网</option>
  　　<option value="http://www.163.com">网易</option>
  　　<option value="http://www.google.com">谷歌</option>
　　</select>

3、获取选择项的值：
　　 <select id="ddlCities" onchange="alert(this.options[this.selectedIndex].value);">
  　　<option value="0">北京</option>
  　　<option value="1">济南</option>
  　　<option value="2">威海</option>
　　</select>

　　获取文本：
　　this.options[this.selectedIndex].text

　　更简洁的直接selectObj.value

4、多选：

 1 <select id="ddlCities" multiple="multiple" size="2">
 2     <option value="0">北京</option>
 3     <option value="1">济南</option>
 4     <option value="2">威海</option>
 5 </select>
 6


 7 使用jq获取选择，仅测试所以写在标签上：

　　<select id="ddlCities" multiple="multiple" size="2" onchange="alert($(this).find('option:selected').text());">
 8     <option value="0">北京</option>
 9     <option value="1">济南</option>
10     <option value="2">威海</option>
11 </select>
12


13 如果纯js写，需要循环了：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
14 <html xmlns="http://www.w3.org/1999/xhtml">
15 <head>
16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
17 <title>无标题文档</title>
18 <style type="text/css">
19 select
20 {
21 display:block;
22 }
23 </style><script type="text/javascript">
24 function ddlCities_onchange(theSel){
25     var arr=[];
26     for(var i=0;i<theSel.options.length;i++){
27         if(theSel.options[i].selected)
28         arr.push(theSel.options[i].innerText);  
29     }
30     alert(arr.join());
31 }
32 </script>
33 </head>
34 
35 <body>
36 <select>
37     <option>请选择网站...</option>
38     <option value="http://www.qq.com">腾讯网</option>
39     <option value="http://www.163.com">网易</option>
40     <option value="http://www.google.com">谷歌</option>
41 </select>
42 
43 <select id="ddlCities" multiple="multiple" size="2" onchange="ddlCities_onchange(this);">
44     <option value="0">北京</option>
45     <option value="1">济南</option>
46     <option value="2">威海</option>
47 </select>
48 </body>
49 </html>

5、添加移除option:
　　jq添加： $("<option value='3'>南京</option>").appendTo($("#ddlCities"));

　　js写法：
　　var anOption = document.createElement_x("option");
　　anOption.text="南京";
　　anOption.value="4";
　　document.getElementByIdx_x("ddlCities").options.add(anOption);
　　或者

　　 document.getElementByIdx_x("ddlCities").add(anOption);