关于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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
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
项目中应用Redis+Php的场景
2016/05/22 PHP
php实现URL加密解密的方法
2016/11/17 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
解析Python编程中的包结构
2015/10/25 Python
浅析Python基础-流程控制
2016/03/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python使用turtle库绘制时钟
2020/03/25 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
会计主管岗位职责
2014/01/03 职场文书
党建示范点实施方案
2014/03/12 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
消防宣传标语大全
2015/08/03 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers