獲取單選按鈕值的onload和隱藏或顯示DIV

Question

我有以下的jsfiddle設置：

http://jsfiddle.net/cvn6n/

基於無線電選擇一個div被隱藏或顯示（如果選擇奧迪的股利是隱藏的，如果選擇了其他值，則顯示div）。我遇到的問題是我需要檢測單選按鈕的初始值（onload），並相應地隱藏或顯示div。

Audi <input type="radio" name="car" id="audi" value="3" checked="checked" onclick="toggle(this)"> 
<br /> 
Merc <input type="radio" name="car" id="merc" value="3" onclick="toggle(this)"> 
<br /> 
BMW <input type="radio" name="car" id="bmw" value="3" onclick="toggle(this)"> 
<br /><br /> 
<div id="testdiv"> 
Not Audi 
</div> 

var t = document.getElementById('testdiv'); 

t.style.visibility = 'visible';     
function toggle(switchElement) { 
    if (switchElement.id != 'audi'){ 
     t.style.display = 'inline'; 
    }else{ 
     t.style.display = 'none'; 
    } 
} 

感謝您的幫助提前。

ps。沒有jQuery，請只是單純的JS解決方案

Answer 1

[].forEach.call(document.forms.carform.car, function(radio){ 
     if(radio.checked) { 
      toggle(radio); 
     } 
}); 

http://jsfiddle.net/cvn6n/1/

Answer 2

從你的榜樣，注意到我感動的積極價值，芝加哥商業交易所，也注意到你應該設置顯示：沒有你的testdiv當你初始化：

Audi <input type="radio" name="car" id="audi" value="3" onclick="toggle(this)"> 
<br /> 
Merc <input type="radio" name="car" id="merc" value="3" checked="checked" onclick="toggle(this)"> 
<br /> 
BMW <input type="radio" name="car" id="bmw" value="3" onclick="toggle(this)"> 
<br /><br /> 
<div id="testdiv" style="display:none;"> 
Not Audi 
</div> 

對於javascript，您可以將我添加到window.onload或您的頁面底部的部分放入，因此在DOM完成加載後觸發。基本上，它會檢查提供的ID列表，併爲活動的ID設置toggle（）。

var t = document.getElementById('testdiv'); 

t.style.visibility = 'visible';     
function toggle(switchElement) { 
    if (switchElement.id != 'audi') { 
     t.style.display = 'inline'; 
    }else{ 
     t.style.display = 'none'; 
    } 
} 

var listOfIds = new Array("audi", "merc", "bmw"); 
for (x in listOfIds) { 
    var element = document.getElementById(listOfIds[x]); 
    if (element.checked) { 
     toggle(element); 
    } 
}