关于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 String 的扩展方法集合
Jun 01 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
JavaScript中的各种宽高属性的实现
May 08 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 安全过滤函数代码
2011/05/07 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php的4种常见运行方式
2015/03/20 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
windows下更新npm和node的方法
2017/11/30 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
技校生自我鉴定范文
2013/09/26 职场文书
会计专业导师推荐信
2014/03/08 职场文书
法人授权委托书
2014/04/03 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
投标保密承诺书
2014/05/19 职场文书
公司财务部岗位职责
2015/04/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
高三数学教学反思
2016/02/18 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript