关于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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
python单链表实现代码实例
2013/11/21 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
实例讲解python中的协程
2018/10/08 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Django--权限Permissions的例子
2019/08/28 Python
python开发入门——列表生成式
2020/09/03 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
社区八一活动方案
2014/02/03 职场文书
计算机软件专业求职信
2014/06/10 职场文书
学习与创新自我评价
2015/03/09 职场文书
入党转正申请报告
2015/05/15 职场文书
结婚典礼主持词
2015/06/29 职场文书
小学语文教学随笔
2015/08/14 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB