關於js擷取radio和select的屬性並控制的代碼

來源:互聯網
上載者:User

實現目標: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>
<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")的失效,還請指教。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.