关于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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
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
c#中的实现php中的preg_replace
2009/12/21 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
python生成器generator用法实例分析
2015/06/04 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python高并发和多线程有什么关系
2020/11/14 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
北京SQL新华信咨询
2016/09/30 面试题
医药销售求职信范文
2014/02/01 职场文书
趣味运动会策划方案
2014/06/02 职场文书
绵山导游词
2015/02/05 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
节约用电通知
2015/04/25 职场文书
毕业论文致谢范文
2015/05/14 职场文书
婚礼家长致辞
2015/07/27 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP