Boutons radio imbriqués HTML

Question

J'ai 4 boutons radio (A, B, C, D). Quand je clique sur le bouton radio A, il y aurait deux autres options - A1 et A2. La même chose arrivera avec les autres. Et si je choisis D2, deux autres boutons radio apparaîtraient.

Comment puis-je faire cela en HTML?

Answer 1

Vous ne pouvez utiliser qu'un ID spécifique sur un élément d'un document. Vous devez mettre différents ids sur chaque élément et les rendre visibles séparément:

<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

Si vous voulez plus de boutons radio apparaissent lorsqu'un certain que l'on choisit, je suggère de ne pas les « imbrication » à l'intérieur d'un autre dans la html Avoir javascript afficher un groupe caché ou RBs quand un est sélectionné. Franchement, je pense que l'utilisation de boutons radio pour faire apparaître une boîte de sélection serait beaucoup plus facile à utiliser, car il est clair que vous choisissez dans un groupe différent. Trop de boutons radio ont toujours l'air moche.

D'autres problèmes avec votre code: ID doit être unique, mettre le texte RB à côté du bouton radio et non à l'intérieur de la balise, et éviter la disposition basée sur la table si possible. javascript et css en ligne doivent être évités aussi, mais comme il s'agit d'un exemple de code, il est en fait plus lisible. Oh, le plus important, vous avez les autres boutons configurés pour apparaître sur onclick, donc ils ne disparaîtront pas si vous désélectionnez le RB: D

Answer 3

@guffa Je pense que je vais juste modifier votre réponse un peu. Mettez tous les boutons radio en option dans un élément <div> comme ceci:

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

Answer 4

version HTML et CSS3 seule (Fiddle):

HTML pour le groupe "D" (d'autres groupes sont similaires)

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