radio、checkbox、select等取舍标签的总结 _Web前端

radio、checkbox、select等选择标签的总结

下面以实例说明：

html页面

<body>

<form name="form1" action="test" method="post">
<label>radio:</label>
<input name="myRadio" type="radio" value="126" checked="true" onclick="getRadioValue();"/>126邮箱
<input name="myRadio" type="radio" value="163" onclick="getRadioValue();"/>163邮箱
<input name="myRadio" type="radio" value="189" onclick="getRadioValue();"/>189邮箱
<input name="myRadio" type="radio" value="gmail" onclick="getRadioValue();"/>gmail邮箱

<input name="setValue" type="button" value="选择163邮箱" onclick="setRadioValue('163');"/>

<br/>
<br/>
<label>checkBox:</label>

<input name="myCheckBox" type="checkbox" value="126" />126邮箱
<input name="myCheckBox" type="checkbox" value="163" />163邮箱
<input name="myCheckBox" type="checkbox" value="189" />189邮箱
<input name="myCheckBox" type="checkbox" value="gmail" />gmail邮箱
全选:<input type="checkbox" id="checkAll"onclick="checkall()" />  


<br/>
<br/>
<label>select:</label>
<select name="mySelect" id="mySelect" onchange="jumpMenu('parent',this,0)">
  <option value="http://www.126.com">126邮箱</option>
  <option value="http://mail.163.com">163邮箱</option>
  <option value="http://mail.189.cn">189邮箱</option>
  <option value="http://www.gmail.com">gmail邮箱</option>
</select>
</form>

</body>

javascript代码：

<script type="text/javascript">
<!--

/*说明 showText()  
1.因为radio后面的文本属于TextNode,而不是HTML   Element.所以只能通过parentNode的childNodes来获取   HTML   ELEMENT和TextNode的集合. 
2.获取childNodes后   遍历集合   找到radio后那么下一个TextNode就是你想要的. 
3.当然读取radio下一个TextNode前你最好判断一下radio下面是否还存在Node,还有最好判断下nodeType是否为3,即TextNode.再通过nodeValue取值. 

或者我们可以用另一个的方法：
我们虽然获取不到radio后面的文本，但是我们可以获得radio value的值，在设置value值的时候可以这样：
<input name="myRadio" type="radio" value="126@126邮箱" checked="true"/>126邮箱
可以把value分为2部分，一部分为value值，一部分做为text部分的值
*/

//获取radio选中
function getRadioValue(){
	var obj = document.getElementsByName("myRadio");
	for(i=0;i<obj.length;i++)
		if(obj[i].checked==true){		    
			alert("radio.value="+obj[i].value);
			showText(obj[i]);
		}			
}

//给radio赋值
function setRadioValue(myvalue){
	var obj = document.getElementsByName("myRadio");
	for(i=0;i<obj.length;i++)
		if(obj[i].value==myvalue){		    
			obj[i].checked=true;
		}	
}


/*checkBox获取值和赋值和radio基本相同，不同之处是一个多些一个单选；*/
//全选或全部不选    
function checkall() {    
    var isChecked=(document.form1.checkAll.checked == true);    
    var elements_all=document.getElementsByName("myCheckBox");    
    for(i=0;i<elements_all.length;i++) {    
        var element=elements_all[i];       
        element.checked=isChecked;
		if(isChecked==true) 
			showText(element);   
    }    
}    

//select标签
/*说明：select 标签如果用struts2或其他框架的话，非常好控制；即使是html标签的select网上也有很多资料。所以下面就简单介绍下:
1、获得options：var elements = document.form1.mySelect.options;
2、获得第i个option后对应的文本：var optionText = elements[i].innerText;
3、eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
4、下一篇文章帖一个select常用操作*/

function jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function showText(obj) { 
	var parentObj = obj.parentNode;   //设置父节点 
	for(var i=0;i <parentObj.childNodes.length;i++){   //循环遍历父节点的子节点集合 
		if(parentObj.childNodes[i]   ==   obj   &&   parentObj.childNodes[i+1]!=null){   //判断当前子节点是否是你要的radio 
			alert(parentObj.childNodes[i+1].nodeValue);   //取值 
		} 
	} 
} 


//-->
</script>