快捷導(dǎo)航

關(guān)于js獲取radio和select的屬性并控制的代碼

更新時間：2011年05月12日 23:11:07 作者：

對于聯(lián)動菜單大家都不會陌生了，但是這還是我第一次寫聯(lián)動的了。原理很簡單，但是自己寫起來就感覺還是有點(diǎn)難度的了

實(shí)現(xiàn)目標(biāo)：1、點(diǎn)擊“匿名小組”，自動跳轉(zhuǎn)：成員類型“私密群”、訪問控制 “群成員”
　　　　　　　2、點(diǎn)擊“公開群”，自動跳轉(zhuǎn)：成員類型“實(shí)名小組”

　　首先是獲得點(diǎn)擊radio的事件，用的是jquery庫，獲得事件后判斷是那個radio，通過判斷是那個radio被checked了然后進(jìn)行聯(lián)動變換。其中遇到的問題有，兼容ie和firefox的事件，然后是設(shè)置select中的中options的selected屬性。

　　兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all;

　　設(shè)置select中的中options的selected屬性用的是var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected");

　　在設(shè)置selected屬性通常用的是document.getElementsByName("select1").options,但是firefox報(bào)undefined。于是遍歷后就用了一個數(shù)組解決了。

　　下面是實(shí)現(xiàn)了目標(biāo)1的完整代碼：
html

復(fù)制代碼代碼如下:

 
<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'/>實(shí)名小組(使用姓名) 
<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

復(fù)制代碼代碼如下:

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

實(shí)現(xiàn)目標(biāo)2時，遇到了SetRadioCheck中的setAttribute不好使了，調(diào)試了也不知道什么原因于是換了obj[i].checked = true;
實(shí)現(xiàn)功能1、2 js

復(fù)制代碼代碼如下:

 
// JavaScript Document 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
$(document).ready(function(){ 
/*點(diǎn)擊"匿名小組"，自動跳轉(zhuǎn)：成員類型"私密群"、訪問控制 "群成員"*/ 
$(":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"); 
} 
} 
/*點(diǎn)擊"公開群"， 自動跳轉(zhuǎn)：成員類型"實(shí)名小組"*/ 
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; 
} 
/*設(shè)置被選中屬性 
*RadioName:要修改屬性radio組的名稱 
*i:radio中第i個元素被選中 
*/ 
function SetRadioCheck(RadioName,i){ 
var obj; 
obj=document.getElementsByName(RadioName); 
//obj[i].setAttribute("checked","checked"); 
obj[i].checked = true; 
} 

對于在第二次調(diào)用SetRadioCheck

復(fù)制代碼代碼如下:

 
if($name == "search_type") 
{ 
if(1 == GetRadioValue($name)) 
{ 
SetRadioCheck("member_type",0); 
} 
} 
obj[i].setAttribute("checked","checked")的失效，還請指教。 

您可能感興趣的文章: