HTML嵌套单选按钮

Question

我有4个单选按钮（A，B，C，D）。 当我单击单选按钮A时，将有另外两个选项-A1和A2。 其他的也一样。 如果我选择D2，将出现另外2个单选按钮。

如何用HTML做到这一点？

Answer 1

仅限HTML和CSS3版本（ Fiddle ）：

组“ D”的HTML（其他组类似）

<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;
}

Answer 2

您只能在文档中的一个元素上使用特定的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 3

如果您希望在选择某个按钮时出现更多单选按钮，建议不要将它们“嵌套”在html中。 选择一个后，让javascript显示一个隐藏的组或RB。

坦白说，我认为使用单选按钮使选择框出现将更加用户友好，因为很明显，您是从其他组中进行选择。 太多的单选按钮总是很难看。

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

Answer 4

@guffa我想我会稍微修改一下您的答案。 将所有可选的单选按钮放在<div>元素中，如下所示：

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