Question

我有2个单选按钮，默认情况下没有选中其中任何一个按钮，我想根据选中的单选按钮检查其中任何一个是否显示Div。（Divs有不同的内容）

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

当其中一个出现时，还有另外两个收音机为另一个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台收音机没有工作，虽然它应该是相同的

谢谢...

Answer 1

只需将单击的事件添加到单选按钮，然后通过Javascript函数在需要时将相应DIV的属性更改为隐藏。要显示它，请删除属性“隐藏”。此外，如果您可以发布一些显示您尝试过/出错的代码，我们可能会提供更多帮助。但我所建议的应该是做出你想要的事情的一般方法。

Answer 2

我不知道你的HTML是什么，所以这就是我所拥有的：

$('input[type="checkbox"]').click(function() {
  $('.divWrapper > div').eq($(this).index()).fadeOut().siblings().fadeIn();
});

我假设这是你的结构：

<form>
  <checkbox>
  <checkbox>
  ...
</form>

<div class="divWrapper">
  <div>
  <div>
  ...
</div>

Answer 3

你的问题不是javascript或html，它实际上是一个CSS问题。你的代码很好，除了values for display are "none" and "block"不是＆＃34;＆＃34;并且＆＃34;隐藏＆＃34;。我修改了你的代码并更新了小提琴。

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

如何根据无线电选择显示差异div

3 个答案: