HTML嵌套单选按钮

Question

我有4个单选按钮（A，B，C，D）。当我点击单选按钮A时，会出现另外两个选项 - A1和A2。其他人也会发生同样的情况。如果我选择D2，则会出现另外两个单选按钮。

我该如何在HTML中做到这一点？

Answer 1

您只能在文档中的一个元素上使用特定的ID。你必须把每一个元素不同的ID，并让他们分别可见：

<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple 

<input type="radio" id="extra1" style="visibility:hidden" other choice here /> 

<input type="radio" id="extra2" style="visibility:hidden" other choice here /> 

Answer 2

如果你想要更多的单选按钮出现在选择某一个，我会建议不是“嵌套”他们内部在彼此HTML。当选择一个时，javascript显示隐藏的组或RB。

坦率地说，我认为使用单选按钮来使选择框出现会更方便用户，因为它清楚地表明您正在从不同的组中选择。太多的单选按钮总是看起来很丑。

您的代码的其他问题：id应该是唯一的，将RB文本放在单选按钮旁边，而不是标签内，并尽可能避免使用基于表格的布局。内联javascript和css也应该避免，但由于这是一个代码示例，它实际上使其更具可读性。哦，最重要的是，你有其他按钮设置为出现onclick，所以他们不会消失，如果你取消选择RB：D

Answer 3

@guffa我想我只是修改你的答案了一下。把所有的可选单选按钮<div>元件这样内：

<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" /> 
<div id="optional_buttons" style="display: none;" > 
optional radio buttons 
</div> 

Answer 4

HTML和CSS3的唯一版本（Fiddle）：

HTML为基 “d”（其他基团也同样）

<div> 
    <input type="radio" name="level0" value="D" id="D"/> 
    <label for="D">D</label> 
    <div class="sub1"> 
     <div> 
      <input type="radio" name="level1" value="D0" id="D0"/> 
      <label for="D0">D0</label> 
     </div> 
     <div> 
      <input type="radio" name="level1" value="D1" id="D1"/> 
      <label for="D1">D1</label> 
      <div class="sub2"> 
       <div> 
        <input type="radio" name="level2" value="D10" id="D10"/> 
        <label for="D10">D1-0</label> 
       </div> 
       <div> 
        <input type="radio" name="level2" value="D11" id="D11"/> 
        <label for="D11">D1-1</label> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.sub1, .sub2 { display: none; } 

:checked ~ .sub1, :checked ~ .sub2 { 
    display: block; 
    margin-left: 40px; 
}