关于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

<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

// 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

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