javascript - 如何根据radio选择显示不同的div

Question

我有 2 个单选按钮，默认情况下没有一个选中，我希望如果其中任何一个选中，则根据选中的单选按钮显示一个 Div。(div有不同的内容)

如果选择更改，出现的一个现在会消失，而另一个会出现。

当其中一个出现时，还有另外 2 个 radio 对另一个 div 执行相同的操作(一个显示，一个隐藏)

这是我尝试做的

JavaScript

function haitham()
{   
    if(document.getElementById('s').checked == true)
    {
      document.getElementById('StudentData').style.display = "block";
      document.getElementById('GraduateData').style.display = "none";
    }
    else if(document.getElementById('g').checked == true)
    {
      document.getElementById('GraduateData').style.display = "block";
      document.getElementById('StudentData').style.display = "none";
    }
}

function info()
{   
    if(document.getElementById('y').checked == true)
    {
      document.getElementById('MoreInfo').style.display = "block";
    }
    else if(document.getElementById('n').checked == true)
    {
      document.getElementById('MoreInfo').style.display = "none";
    }
}

HTML

            <input class="margin2" id="s" type="radio" name="kind" value="student" onchange="haitham()"
            required="required" />Student
            <input class="margin2" id="g" type="radio" name="kind" value="graduate" onchange="haitham()"
            required="required" />Graduate


<div id="StudentData">
     content 1
     <input class="margin2" id="y" type="radio" name="info" value="yes" onchange="info()"
            required="required" />Student
     <input class="margin2" id="n" type="radio" name="info" value="no" onchange="info()"
            required="required" />Graduate

</div>

<div id="GraduateData">
     content 2   

</div>

<div id="MoreInfo">
     content 3
</div>

第一个工作正常，但其他 2 个 radio 无法工作，尽管它们应该是相同的

谢谢...

Answer 1

您的问题不是 javascript 或 html 问题，它实际上是 CSS 问题。除了显示的值是“none”和“block”而不是“”和“hidden”之外，您的代码很好。我修改了你的代码并更新了 fiddle 。

这是链接: http://jsfiddle.net/8JpSQ/4/