关于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 对象的创建与使用
Mar 09 Javascript
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Javascript 数组排序详解
Oct 22 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php header Content-Type类型小结
2011/07/03 PHP
php array_walk() 数组函数
2011/07/12 PHP
php实例分享之二维数组排序
2014/05/15 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
使用python实现对元素的长截图功能
2019/11/14 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
简历上的自我评价怎么写
2014/01/28 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python