使用单选按钮隐藏具有多个图层的 div

Question

我很清楚，当涉及到单选按钮时，使用显示/隐藏功能已经得到了解决，但我已经到处寻找解决问题的方法。我试图做的是创建一个表单，访问者有几个选项可供选择，他们单击其中一个选项，它会显示一个隐藏的div，在该div中，它会为访问者提供更多选项供选择。这就是我遇到这个问题的地方。我想做的是让第一个隐藏的div在选择该div内部的一个选项以显示该按钮隐藏的内容后保持显示。

这是我目前正在做的工作的jfiddle-http://jsfiddle.net/UDEQZ/

这是html

<input name="pagetype" type="radio" onclick="show(0)" />First
<input name="pagetype" type="radio" onclick="show(1)" />Second
<input name="pagetype" type="radio" onclick="show(2)" />Third
<p></p>
<div id="d0" class="CF" style="display:none;">Select One:
<p></p>
<input name="pagetype" type="radio" onclick="show(3)" />One
<input name="pagetype" type="radio" onclick="show(4)" />Two
<input name="pagetype" type="radio" onclick="show(5)" />Three
<input name="pagetype" type="radio" onclick="show(6)" />Four
<input name="pagetype" type="radio" onclick="show(7)" />Five
<input name="pagetype" type="radio" onclick="show(8)" />Six
<input name="pagetype" type="radio" onclick="show(9)" />Seven</div>
<div id="d1">Two</div>
<div id="d2">Three</div>
<div id="d3">Hazaa</div>
<div id="d4">Bazinga</div>
<div id="d5">Hazaa</div>
<div id="d6">Bazinga</div>
<div id="d7">Hazaa</div>
<div id="d8">Bazinga</div>
<div id="d9">Hazaa</div>

这是我使用的脚本

function show(number) {
"use strict";
var el, i = 0;
while (el = document.getElementById("d" + (i++))) {
    el.style.display = "none";
}
document.getElementById('d' + number).style.display = "block";
}

对于HTML，我尝试过的一件事，对我来说，应该是用onclick="show(3)"，我把它改成了onclick="show(0, 3)"，但当你点击旁边有one的单选按钮时，什么都没发生。

我对javascript/jquery还是个新手，我看到很多单选按钮问题都使用了show/hide，但我还没有看到解决方案，甚至还没有看到与我遇到的问题有关的问题。我尝试了一些不同的选项，通过一个数组运行它（还是有点哈？哈哈），使用显示/隐藏功能，以及在这里和其他网站上描述的多种其他方式。出于某种原因，我觉得这个解决方案非常简单，我只是太傻了，没有看到它被张贴或跳过。

Answer 1

由于jquery被标记，我使用jquery来减少代码。。

function show(number) {
  $('[id^="d"]').hide();
  if(number >=3){
    $('#d0').show();
  }
  $('#d' + number).show();
}

然而，这是对所有其他div（如d3,d4,d5,d6..）进行共排序，这些div属于d0。。我在这里所做的是使用属性选择器$('[id^="d"]')，它选择以d开始的所有元素ID并隐藏它…所以这隐藏了所有元素。。如果数字参数>3，则签入。。如果它大于3则显示#d0元素。。，则只显示id为=number 的元素

小提琴这里