关于js获取radio和select的属性并控制的代码


Posted in Javascript onMay 12, 2011

实现目标:1、点击“匿名小组”,自动跳转:成员类型“私密群”、访问控制 “群成员”

 2、点击“公开群”,  自动跳转:成员类型“实名小组” 

关于js获取radio和select的属性并控制的代码

首先是获得点击radio的事件,用的是jquery库,获得事件后判断是那个radio,通过判断是那个radio被checked了然后进行联动变换。其中遇到的问题有,兼容ie和firefox的事件,然后是设置select中的中options的selected属性。

兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all;

设置select中的中options的selected属性用的是var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected");

在设置selected属性通常用的是document.getElementsByName("select1").options,但是firefox报undefined。于是遍历后就用了一个数组解决了。

下面是实现了目标1的完整代码:
html

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="l.js"></script> 
<p><label>成员类型:</label> 
<input type="radio" name="member_type" checked="checked" value='0'/>实名小组(使用姓名) 
<input type="radio" name="member_type" value='1'/>匿名小组(使用昵称) 
</p> 
<p><label>群组类型:</label> 
<input type="radio" name="search_type" checked="checked" value='1'/>公开群 
<input type="radio" name="search_type" value='0'/>私密群 
</p> 
<p><label>访问控制: </label> 
<select class="select1" name="select1"> 
<option value="0">任何人</option> 
<option value="1">群成员</option> 
</select> 
</p>

js
// JavaScript Document 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
$(document).ready(function(){ 
$(":radio").click(function(e){ 
var $name=(nn6?e.target.name:event.srcElement.name); 
if($name == "member_type") 
{ 
if(1 == GetRadioValue($name)) 
{ 
SetRadioCheck("search_type",1); 
var t=document.getElementsByName("select1")[0][1]; 
t.setAttribute("selected","selected"); 
} 
} 
}); 
});

实现目标2时,遇到了SetRadioCheck中的setAttribute不好使了,调试了也不知道什么原因于是换了obj[i].checked = true;
实现功能1、2 js
// JavaScript Document 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
$(document).ready(function(){ 
/*点击"匿名小组",自动跳转:成员类型"私密群"、访问控制 "群成员"*/ 
$(":radio").click(function(e){ 
var $name=(nn6?e.target.name:event.srcElement.name); 
if($name == "member_type") 
{ 
if(1 == GetRadioValue($name)) 
{ 
SetRadioCheck("search_type",1); 
var t=document.getElementsByName("select1")[0][1]; 
t.setAttribute("selected","selected"); 
} 
} 
/*点击"公开群", 自动跳转:成员类型"实名小组"*/ 
if($name == "search_type") 
{ 
if(1 == GetRadioValue($name)) 
{ 
SetRadioCheck("member_type",0); 
} 
} 
}); 
}); 
/*获得被check的radio的值 
*RadioName:要获得radio值的radio组名称 
*/ 
function GetRadioValue(RadioName){ 
var obj; 
obj=document.getElementsByName(RadioName); 
if(obj!=null){ 
var i; 
for(i=0;i<obj.length;i++){ 
if(obj[i].checked){ 
return obj[i].value; 
} 
} 
} 
return null; 
} 
/*设置被选中属性 
*RadioName:要修改属性radio组的名称 
*i:radio中第i个元素被选中 
*/ 
function SetRadioCheck(RadioName,i){ 
var obj; 
obj=document.getElementsByName(RadioName); 
//obj[i].setAttribute("checked","checked"); 
obj[i].checked = true; 
}

对于在第二次调用SetRadioCheck
if($name == "search_type") 
{ 
if(1 == GetRadioValue($name)) 
{ 
SetRadioCheck("member_type",0); 
} 
} 
obj[i].setAttribute("checked","checked")的失效,还请指教。
Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 #Javascript
五个jQuery图片画廊插件 推荐
May 12 #Javascript
JavaScript 继承使用分析
May 12 #Javascript
JS焦点图切换,上下翻转
May 12 #Javascript
js 中{},[]中括号,大括号使用详解
May 12 #Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
php学习之变量的使用
2011/05/29 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
详解python中的数据类型和控制流
2019/08/08 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
如何理解python对象
2020/06/21 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
见习期自我鉴定范文
2014/03/19 职场文书
施工安全生产承诺书
2014/05/23 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers