关于js获取radio和select的属性并控制

　　对于联动菜单大家都不会陌生了，但是这还是我第一次写联动的了。原理很简单，但是自己写起来就感觉还是有点难度的了。

　　实现目标：1、点击“匿名小组”，自动跳转：成员类型“私密群”、访问控制 “群成员”
　　　　　　　2、点击“公开群”，  自动跳转：成员类型“实名小组” 

　　

　　首先是获得点击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

View Code

1 < script type ="text/javascript" src ="jquery.js" ></ script >
2   < script type ="text/javascript" src ="l.js" ></ script >
3
4   < p >< label > 成员类型: </ label >
5 < input type ="radio" name ="member_type" checked ="checked" value ='0' /> 实名小组(使用姓名)
6 < input type ="radio" name ="member_type" value ='1' /> 匿名小组(使用昵称)
7 </ p >
8 < p >< label > 群组类型: </ label >
9 < input type ="radio" name ="search_type" checked ="checked" value ='1' /> 公开群
10 < input type ="radio" name ="search_type" value ='0' /> 私密群
11 </ p >
12 < p >< label > 访问控制: </ label >
13 < select class ="select1" name ="select1" >
14 < option value ="0" > 任何人 </ option >
15 < option value ="1" > 群成员 </ option >
16 </ select >
17 </ p >

js

View Code

// 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 " );
}
}
});
});

/* 获得被check的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 ;
}

/* 设置被选中属性 */
function SetRadioCheck(RadioName,i){
var obj;
obj = document.getElementsByName(RadioName);
obj[i].setAttribute( " checked " , " checked " );
}

实现目标2时，遇到了SetRadioCheck中的setAttribute不好使了，调试了也不知道什么原因于是换了obj[i].checked = true;

实现功能1、2 js

View Code

// 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")的失效，还请指教。