获取单选按钮值 onload 并隐藏或显示 div

Question

我有以下 jsfiddle 设置：

http://jsfiddle.net/cvn6n/

根据单选选择隐藏或显示 div（如果选择 audi，则隐藏 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';
    }
}

我在这里先向您的帮助表示感谢。

附言。 没有jquery，请只是纯js解决方案

Answer 1

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

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

Answer 2

从您的示例中，注意到我将活动值移至 Merc，还请注意您应该在初始化 testdiv 时设置 display: none ：

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