关于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 相关文章推荐
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 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 高手之路(三)
2006/10/09 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
用javascript操作xml
2006/11/04 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python3中rank函数的用法
2019/11/27 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python中upper是做什么用的
2020/07/20 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
保险公司年会主持词
2014/03/22 职场文书
2014年党课学习材料
2014/05/11 职场文书
大学生找工作求职信
2014/07/09 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL