需要非常简单的 Javascript 帮助答案

【问题标题】：Frustratingly simple Javascript Help Required需要非常简单的 Javascript 帮助
【发布时间】：2012-07-05 04:04:33
【问题描述】：

我正在制作一个表单字段，我想做一个简单的显示隐藏以在单选按钮上显示 div。

<form id="basic" name="basic">

<label><input name="formelement" type="radio" value="yes" /> Yes   </label>
<label><input name="formelement" type="radio" value="no" /> No </label>

<div id="yes" style="display: none;">
This is the div that displays that shows when 'Yes' is selected.
</div>

<div id="no" style="display: none;">
This is the div that displays that shows when 'No' is selected.
</div>

</form>

我玩过一些我在网上找到的各种 javascript，但并没有取得很大的成功，因为它们中的大多数在网上都设法显示隐藏一个 div。选择“否”时隐藏“是”，反之亦然是棘手的部分。如果有人能提供一些帮助，将不胜感激！

【问题讨论】：

您可能想要使用 JQuery。浏览他们的教程，您将能够轻松地做到这一点w3schools.com/jquery/default.asp
W3Schools 不被认为是学习 JavaScript / jQuery 的最佳场所之一（请参阅 W3Fools.com）。一个备受推崇的 JavaScript 替代方案是 MDC 的 JavaScript 指南 (developer.mozilla.org/en/JavaScript)。对于 jQuery，请查看 jQuery 的文档 (docs.jquery.com/Main_Page)

标签： javascript forms show-hide

【解决方案1】：

只需将这些代码粘贴在头标签之间

<script type="text/javascript">
window.onload=function(){
    var el1 = document.getElementsByName('formelement')[0];
    var el2 = document.getElementsByName('formelement')[1];  
    el1.onchange=function(){
        var show=el1.value;
        var hide=el2.value;
        document.getElementById(show).style.display='block';
        document.getElementById(hide).style.display='none';
    }

    el2.onchange=function(){
        var show=el2.value;
        var hide=el1.value;
        document.getElementById(show).style.display='block';
        document.getElementById(hide).style.display='none';
    }  
}
</script>

DEMO.

【讨论】：

【解决方案2】：

以下假设radio的值与div的id相同..

function getRadioVal(name){
   var oRadio = document.forms[0].elements[name];
   for(var i = 0; i < oRadio.length; i++)
      if(oRadio[i].checked)
         return oRadio[i].value;
   return '';
}

//hide both divs..
document.getElementById("yes").style.display = "none";
document.getElementById("no").style.display = "none";

//show only one of them..
document.getElementById(getRadioVal("formelement")) = "block";

当事情变得复杂时，在没有任何库的情况下处理 javascript 会很痛苦，我会推荐诸如 jQuery 之类的库

【讨论】：

【解决方案3】：

这就是你想要的

How can I check whether a radio button is selected with JavaScript?

分配 onclick 事件，一切顺利。

【讨论】：