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

【问题标题】：Information inside the div to be displayed when the second radio button is clicked单击第二个单选按钮时要显示的 div 内的信息
【发布时间】：2011-10-21 11:03:52
【问题描述】：

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

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

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

我该怎么做？

【问题讨论】：

标签： javascript forms dom-events unobtrusive-javascript

【解决方案1】：

您可以在两个单选按钮上挂钩click 事件，然后使用您感兴趣的那个的checked 属性来确定div 通过其.style.display 属性的可见性（ "none" 表示隐藏，"" 表示默认 [block])。

您可以通过多种方式访问单选按钮和div 的DOM 元素。最简单的方法之一是如果你给他们id 值：

<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>

那么就是（live example）：

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

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

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

方便的参考资料：

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

【讨论】：

【解决方案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>

【讨论】：

既然他标记了这个unobtrusive-javascript，将处理程序放在onclick 属性中可能不是他想要的。

【解决方案3】：

<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>

通过事件处理，您可以获得更通用的解决方案，适用于多种情况。问候。

【讨论】：

【解决方案4】：

在每个输入元素上添加和 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";
}

【讨论】：

错字：onClick 功能中的消息而不是按摩

【解决方案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>

【讨论】：

【解决方案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 <

【讨论】：