下面以实例说明:
html页面
<body>
<form name="form1" action="test" method="post">
<label>radio:</label>
<input name="myRadio" type="radio" value="126" checked="true" οnclick="getRadioValue();"/>126邮箱
<input name="myRadio" type="radio" value="163" οnclick="getRadioValue();"/>163邮箱
<input name="myRadio" type="radio" value="189" οnclick="getRadioValue();"/>189邮箱
<input name="myRadio" type="radio" value="gmail" οnclick="getRadioValue();"/>gmail邮箱
<input name="setValue" type="button" value="选择163邮箱" οnclick="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"οnclick="checkall()" />
<br/>
<br/>
<label>select:</label>
<select name="mySelect" id="mySelect" οnchange="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>