Question

我有两个单选按钮和一个div：

<input type='radio' name='option' value='test1' />
<input type='radio' name='option' value='test2' />
<div style="display:none">
    Hidden info
</div>

我想要的是当点击第二个单选按钮时显示div内的信息，但是当他们切换到另一个单选按钮时我希望它消失。我还想在原始JavaScript中执行此操作。

我该怎么做？

Answer 1

您可以在两个单选按钮上挂钩click事件，然后使用您感兴趣的属性的checked属性来确定div来自.style.display的可见性其div属性（“无”表示隐藏，“”表示默认[块]）。

您可以通过多种方式访问单选按钮和id的DOM元素。最简单的方法之一就是给它们<input id="rdoTest1" type='radio' name='option' value='test1' /> <input id="rdoTest2" type='radio' name='option' value='test2' /> <div id="targetDiv" style="display:none"> Hidden info </div>值：

(function() {
    var rdoTest1  = document.getElementById("rdoTest1"),
        rdoTest2  = document.getElementById("rdoTest2"),
        targetDiv = document.getElementById("targetDiv");

    rdoTest1.onclick = rdoTest2.onclick = handleClick;
    function handleClick() {
        targetDiv.style.display = rdoTest2.checked ? "" : "none";
    }
})();

然后就是（live example）：

body

确保该脚本位于window.onload元素的末尾，或将其包装在id或类似的处理程序中。

但是如果您不能或不想使用name值，则还有很多其他方法可以找到元素 - getElementsByTagName，然后通过{{1}}等找到它们。

方便的参考资料：

DOM2 Core
DOM2 HTML
DOM3 Core
HTML5 Specification（现在有HTML-DOM绑定，接管DOM2 HTML）

Answer 2

这是我的直接，没有测试它，但我认为它应该做的伎俩

<script type="text/javascript">
    function toggleDiv() {
       var e = document.getElementById('toggle');
       if(e.style.display == 'block') {
          e.style.display = 'none';
       } else {
          e.style.display = 'block';
       }
    }
</script>

<input type='radio' name='option' value='test1' onclick="toggleDiv()" />
<input type='radio' name='option' value='test2' onclick="toggleDiv()" /> 
<div id="toggle" style="display:none">
     Hidden info   
</div>

Answer 3

在输入元素上添加和ID：

<input type='radio' name='option' id="option_1" value='test1' />
<input type='radio' name='option' id="option_2" value='test2' /> 
<div style="display:none" id="message">Hidden info</div>

使用javascript引用每个单选按钮，并根据其状态分配可见性：

option1 = document.getElementById("option_1");
option2 = document.getElementById("option_2");
message = document.getElementById("message");
option1.onclick = function(){
  message.style.display = "block";
}
option2.onclick = function(){
  message.style.display = "none";
}

Answer 4

<script type="text/javascript">
function eventHandler (e) {
    if (! e)
        e = event;
    return e.target || e.srcElement;
}

function handleDivShowing(e) {
    var radio = eventHandler (e);
    var div = document.getElementById('divToShow');

    if(radio.value == 'test2') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
}

<input type='radio' name='option' value='test1' onclick="handleDivShowing(event)" />
<input type='radio' name='option' value='test2' onclick="handleDivShowing(event)" /> 
<div id="divToShow" style="display:none">
     Hidden info   
</div>

通过事件处理，您可以使用更通用的解决方案，对多个案例有效。问候。

Answer 5

以下是您需要的代码：

    <html>
<head>
<script type="text/javascript">
    function showhide()
    {
        var opt2 = document.getElementById("option_2");
        var msg = document.getElementById("message");

        if(opt2.checked)
        {
            msg.style.visibility = "visible";
        }
        else {
            msg.style.visibility = "hidden";
        }
    }
</script>
</head>
<body>
<!--The ID is not necessary in the first radio button-->
<input type="radio" name="option" value="test1" id="option_1" onclick="showhide()" />
<input type="radio" name="option" value="test2" id="option_2" onclick="showhide()" /> 
<div style="visibility:hidden;" id="message">Hidden info</div>
</body>
</html>

Answer 6

<input type='radio' name='option' value='test1' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='none'):(document.getElementById('yourdiv').style.display='block'))" />
<input type='radio' name='option' value='test2' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='block'):(document.getElementById('yourdiv').style.display='none'))" /> 
<div id="yourdiv" style="display:none">
    Hidden info
</div>

它有点长但是有效。 - > Live Demo <

单击第二个单选按钮时显示div内的信息

6 个答案: