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