chaînée radio Boutons HTML Javascript

Tous,chaînée radio Boutons HTML Javascript

ont utilisé ce site plusieurs fois avant et eu quelques bonnes réponses si nous espérons que quelqu'un peut aider à nouveau. Je veux un ensemble de boutons radio, de sorte que lorsque vous cliquez sur un bouton - vous obtenez un autre ensemble ci-dessous. Et puis, lorsque vous cliquez sur l'un des 2 jeu de boutons, vous obtiendrez un troisième, etc. Actuellement, je donne les résultats suivants:

<html> 
<head> 
<title>My Wizard</title> 

    <script language="javascript"> 

    function Display(question) { 
      h1=document.getElementById("yes"); 
      h2=document.getElementById("no"); 
      h3=document.getElementById("dk"); 
      h4=document.getElementById("yes2"); 

       if (question=="yes") h1.style.display="block"; 
        else h1.style.display="none"; 
       if (question=="no") h2.style.display="block"; 
        else h2.style.display="none"; 
       if (question=="dk") h3.style.display="block"; 
        else h3.style.display="none"; 
       if (question=="yes2") h4.style.display="block"; 
        else h4.style.display="none"; 
           } 
    </script> 


</head> 

<body> 

    <hr> 
     <form name="form1"> 
     <p>Do you like the colour blue?</p> 

      <input type="radio" name="type" value="yes" checked 
      onClick="Display('yes');"> 
      Yes 

      <input type="radio" name="type" value="no" 
      onClick="Display('no');"> 
      No 

      <input type="radio" name="type" value="dk" 
      onClick="Display('dk');"> 
      Don't know 

<br> 

<div ID="yes" style="display:none;"> 

    <hr> 
     <p>Do you like the colour red?</p> 

      <input type="radio" name="type" value="yes2" checked 
      onClick="Display('yes2')"> 
      Yes 

      <input type="radio" name="type" value="no2" 
      onClick="Display('no2');"> 
      No 

</div> 

<div ID="yes2" style="display:none"> 
I want this to appear beneath the 2nd set of buttons, not replacing it! 
</div> 

<div ID="no2" style="display:none"> 
test2 
</div> 


<div ID="no" style="display:none"> 
<b>this is my no box:</b> 
<input type="text" name="no" size="25"> 
</div> 

<div ID="dk" style="display:none"> 
<b>dk:</b> 
<input type="text" name="dk" size="15"> 
</div> 

</form> 
</body> 
</html>

Donc, fondamentalement, je suis en train de faire un peu sorcier - donc quelque chose cela posera une question à l'utilisateur, et sur cette base - il leur en demandera une autre. Je ne veux pas utiliser les applications côté serveur, donc j'essaie quelque chose de simple comme ça - mais chaque fois que l'utilisateur sélectionne une option du 2ème jeu de boutons, le texte qui va avec remplace le 2ème jeu de boutons. Qu'est-ce que je fais mal?

Veuillez sélectionner «oui» et «oui» à nouveau pour voir ce que je veux dire. Toute aide serait appréciée!

Joe

Source

2011-10-03 user977380

Quel genre de nom est 'oui2'? Cela devrait être 'fichier non trouvé'. – david

Votre déclaration if est erroné. Vous demandez encore et encore ceci: if (question=="yes") h1.style.display="block"; else h1.style.display="none"; et la deuxième fois si ce n'est pas vrai, alors vous mettez le h1 à être caché.

ici est une solution:

<html> 
<head> 
<title>My Wizard</title> 

<script language="javascript"> 

function Display(question, i) { 
     h1=document.getElementById("yes"); 
     h2=document.getElementById("no"); 
     h3=document.getElementById("dk"); 
     h4=document.getElementById("yes2"); 

     if(i==1){ 
      if (question=="yes") h1.style.display="block"; 
       else h1.style.display="none"; 
      if (question=="no") h2.style.display="block"; 
       else h2.style.display="none"; 
     }else if(i==2){ 
      if (question=="dk") h3.style.display="block"; 
       else h3.style.display="none"; 
      if (question=="yes2") h4.style.display="block"; 
       else h4.style.display="none"; 
     } 
} 
</script> 


</head> 

<body> 

    <hr> 
    <form name="form1"> 
    <p>Do you like the colour blue?</p> 

     <input type="radio" name="type" value="yes" checked 
     onClick="Display('yes', 1);"> 
     Yes 

     <input type="radio" name="type" value="no" 
     onClick="Display('no', 1);"> 
     No 

     <input type="radio" name="type" value="dk" 
     onClick="Display('dk', 1);"> 
     Don't know 

<br> 

<div ID="yes" style="display:none;"> 

<hr> 
    <p>Do you like the colour red?</p> 

     <input type="radio" name="type" value="yes2" checked 
     onClick="Display('yes2', 2)"> 
     Yes 

     <input type="radio" name="type" value="no2" 
     onClick="Display('no2', 2);"> 
     No 

</div> 

<div ID="yes2" style="display:none"> 
I want this to appear beneath the 2nd set of buttons, not replacing it! 
</div> 

<div ID="no2" style="display:none"> 
test2 
</div> 


<div ID="no" style="display:none"> 
<b>this is my no box:</b> 
<input type="text" name="no" size="25"> 
</div> 

<div ID="dk" style="display:none"> 
<b>dk:</b> 
<input type="text" name="dk" size="15"> 
</div> 

</form> 
</body> 
</html>

Source

2011-10-03 20:56:27

C'est exactement ce que je veux! Merci beaucoup. Je suis très nouveau sur Javascript, ça me prend un peu de temps. Réponse absolument parfaite cependant. Merci beaucoup – user977380

Martin, Si vous cliquez sur oui dans la case du haut, alors oui dans la deuxième case, puis retournez dans la première case et cliquez sur non - vous obtenez la deuxième case de réponse apparaissant sous la première question. Est-ce facile à réparer? – user977380

Oui. Vous avez un si, et si cette condition est remplie, les choses arrivent. En ce moment vous venez de mettre les choses à voir, donc ajoutez simplement une ligne qui cache d'autres choses. Un modèle presque 'if (condition) {hX.style.display =" bloc "; hY.style.display =" aucun ";} else {hY.style.display =" block "; hX.style.display =" aucun ";}' ou quelque chose comme ça. En général, il suffit de penser à ce que vous voulez arriver si la condition est remplie. Une autre approche consiste à le diviser en fonctions de remorquage (recommandé lorsque les blocs deviennent gros) –

éléments d'entrée radio sont regroupés par leur attribut name. Vous devez attribuer un nom différent aux autres ensembles d'éléments d'entrée radio.

exemple visuel:

[x] name=favColor [ ] name=favRed 
[ ] name=favColor [x] name=favRed 
[ ] name=favColor [ ] name-favRed

Voir aussi: https://developer.mozilla.org/en/HTML/Element/input

Source

2011-10-03 20:48:11

chaînée radio Boutons HTML Javascript

Répondre

Questions connexes