关于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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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 MYSQL 数据备份类
2009/06/19 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
laravel自定义分页效果
2017/07/23 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue的mixins属性详解
2018/03/14 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python下载指定页面上图片的方法
2016/05/12 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python队列queue模块详解
2018/04/27 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
平遥古城导游词
2015/02/03 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
学雷锋活动简报
2015/07/20 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
MySql分区类型及创建分区的方法
2022/04/13 MySQL