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

hanxin830311

浏览: 1069902 次
性别:
来自: 天津

最近访客更多访客>>

zhaozhijun1988

锋之弥漫

xiaolongkill

dsfssss

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

常用应用实例@javaScript

Gmail JavaScript 框架 HTML

下面以实例说明：

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>

index.rar (2.1 KB)
下载次数: 6

分享到：

select元素javascript常用操作（转） | Tomcat访问日志详细配（转）

2011-05-04 10:25
浏览 3781
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

js 正则表达式去除html字符中所有的标签（img标签除外）

移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片

js手机移动端下拉选择插件

Layer关于回调函数细节

js中的数组对象排序

js自定义多字段排序

JavaScript实现本地数据简单存取以及Json数据存取

JS 判断当前访问页面的是手机、平板或电脑

Js排序插件Sortable

JS常用各种正则表达式

js读取解析JSON类型数据

JS的trim()方法

[转]页面所有元素加载完成之后执行某个js函数

img标签src对应的图片不存在，显示一个默认的图片

JS函数isNaN() 判断数字

仿腾讯回顶部和建议

Js保留小数点

定宽的textarea根据内容自动调整高度

用javascript实现点击链接弹出图片另存为而不是直接打开

Baidu Button 如何安装多个分享按钮

最近访客更多访客>>