关于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和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 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 文件上传全攻略
2010/04/28 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python WindowsError的错误代码详解
2017/07/23 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
《雷雨》教学反思
2014/02/20 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书