关于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学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
vue跨域解决方法
Oct 15 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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/09/05 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python中max函数用法实例分析
2015/07/17 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python使用turtle库绘制树
2018/06/25 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
八年级音乐教学反思
2014/01/09 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
安全目标管理责任书
2014/07/25 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
教师节感想
2015/08/11 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis