Question

我有以下jsfiddle设置：

根据无线电选择隐藏或显示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';
    }
}

感谢您的帮助。

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

从您的示例中，注意到我将活动值移动到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);
    }
}

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

2 个答案: