jQuery实现Radio与Select联动及IE/Firefox兼容处理

实现目标与需求分析

实现目标：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错误。因此，通过遍历并使用数组方式解决了该问题。

HTML结构实现

下面是实现了目标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>

JavaScript逻辑代码

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