关于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 弹出层插件实现代码
Oct 24 Javascript
取选中的radio的值
Jan 11 Javascript
Javascript倒计时代码
Aug 12 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
js星星评分效果
Jul 24 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
简单实现jquery焦点图
Dec 12 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
js实现登录与注册界面
Nov 01 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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中数组的分组排序实例
2014/06/01 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
extjs render 用法介绍
2013/09/11 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python流程控制常用工具详解
2020/02/24 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
计算机软件专业求职信
2014/06/10 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
如何书写授权委托书?
2019/06/25 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
Python爬虫实战之爬取携程评论
2021/06/02 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS