javascript 处理表单元素

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

<form id="f1">
　　<input type="text" tabindex="0" name="t1" value="输入内容" />
　　<input type="radio" name="r1" value="1" />
　　<input type="radio" name="r1" checked value="2" />
　　<input type="radio" name="r1" value="3" />
</form>

<script>
　　function getID(id){
　　　　return document.getElementById(id);
　　};

　　var formID = getID("f1");
　　console.log(formID.t1.value); // 获取name="t1"的值

　　// 获取相同name值的一组元素
　　console.log(formID.r1); // 返回的是一个数组节点
　　for(var i=0; i<formID.r1.length; i++){
　　　　if(formID.r1[i].checked){
　　　　alert(formID.r1[i].value);
　　　　}
　　}
</script>

二、获取文本框的值

<form id="f1">
　　<input type="text" id="username" tabindex="0" name="t1" value="" />
　　<input type="button" id="sendForm" value="提交" />
</form>

<script>
　　function getID(id){
　　　　return document.getElementById(id);
　　};

　　var text1 = getID("username");
　　var sendBtn = getID("sendForm");

　　sendBtn.onclick = function(){
　　　　console.log(text1.value); // 获取文本元素的内容
　　}
</script>

三、checkbox 多选元素的处理

<form id="f1">
　　<input type="checkbox" name="box1" value="1111" />1111
　　<input type="checkbox" name="box1" value="2222" />2222
　　<input type="checkbox" name="box1" value="3333" />3333
　　<input type="checkbox" name="box1" value="4444" />4444
　　<input type="button" id="sendForm" value="提交" />
　　<input type="button" id="allBox" value="全选" />
　　<input type="button" id="reverseBox" value="反选" />
</form>

<script>
　　function getID(id){
　　　　return document.getElementById(id);
　　};

　　var f1 = getID("f1").box1;
　　var sendForm = getID("sendForm");
　　var allBox = getID("allBox");
　　var reverseBox = getID("reverseBox");
　　var setVal = ""

　　// 提取选中的元素
　　sendForm.onclick = function(){
　　　　for(var i=0; i<f1.length; i++){
　　　　　　if(f1[i].checked){
　　　　　　　　setVal += f1[i].value + ",";
　　　　　　}
　　　　}
　　　　console.log(setVal)
　　};

　　// 全选
　　allBox.onclick = function(){
　　　　for(var i=0; i<f1.length; i++){
　　　　　　f1[i].checked = true;
　　　　}
　　};

　　// 反选
　　reverseBox.onclick = function(){
　　　　for(var i=0; i<f1.length; i++){
　　　　　　if(f1[i].checked){
　　　　　　　　f1[i].checked = false;
　　　　　　}
　　　　　　else{
　　　　　　　　f1[i].checked = true;
　　　　　　}
　　　　}
　　};
</script>

四、radio 单选框处理

<form id="f1">
　　<input type="radio" name="r1" value="男" /> 男
　　<input type="radio" name="r1" value="女" /> 女
　　<input type="radio" name="r2" value="城市" /> 城市
　　<input type="radio" name="r2" value="乡村" /> 乡村
　　<input type="button" id="sendForm" value="提交" />
</form>

<script>
function getID(id){
　　return document.getElementById(id);
};

var sex = getID("f1").r1;
var city = getID("f1").r2;
var sendForm = getID("sendForm");
var setR1 = "", setR2 = "";

for(var i=0; i<sex.length; i++){　　// 侦听选择项并存储
　　sex[i].onclick = function(){
　　　　setR1 = this.value;
　　};

　　city[i].onclick = function(){
　　　　setR2 = this.value;
　　}
}

sendForm.onclick = function(){
　　if(setR1 === ""){
　　　　alert("请选择您的性别");
　　　　return false;
　　}
　　if(setR2 === ""){
　　　　alert("请选择所在的城市类型");
　　　　return false;
　　}
　　alert(setR1 + "," + setR2);
}
</script>

五、<select> 菜单

<form id="f1">
　　<select id="sel"></select>
　　<input type="button" id="sendForm" value="提交" />
</form>

<script>
　　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"}];

function getID(id){
　　return document.getElementById(id);
};

var sel = getID("sel");
var sendBtn = getID("sendForm");

// 填加option元素
function addOption(){
　　var addOption = "";
　　for(var i=0; i<banks.length; i++){
　　　　addOption += "<option value='" + banks[i].bankCode + "'>" + banks[i].bankName + "</option>";
　　}
　　sel.innerHTML = addOption;
};
addOption();

// 获取当前的焦点下标和选中的值
sel.onchange = function(){
　　var _index = sel.selectedIndex;
　　console.log("下标:" +_index);
　　var _val = sel.options[_index].value;
　　console.log("选中的值:" + _val);
}
</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、多选：

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

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

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

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

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select
{
display:block;
}
</style><script type="text/javascript">
function ddlCities_onchange(theSel){
var arr=[];
for(var i=0;i<theSel.options.length;i++){
if(theSel.options[i].selected)
arr.push(theSel.options[i].innerText);
}
alert(arr.join());
}
</script>
</head>

<body>
<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>

<select id="ddlCities" multiple="multiple" size="2" onchange="ddlCities_onchange(this);">
<option value="0">北京</option>
<option value="1">济南</option>
<option value="2">威海</option>
</select>
</body>
</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);