Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] afficher plusieurs choses en fonction d'un bouton radio

ça marche pas

Sujet résolu
    1 février 2006 à 18:11:13

    Salut, je voudrais faire un formulaire avec des selections en radio, puis quand on clique sur un bouton j'aimerais que le texte qui lui correspond appraisse et que les autres disparaissent, mais je ne sais pas comment faire.

    Voici ce que j'ai essayé;
            <script language="Javascript">
                                                                                            // ==================
                                                                                            //      Activations - Désactivations
                                                                                            // ==================
                                                                                    function GereControle(Controleur, Controle)
                                                                                    {
                                                                                                    var objControleur = document.getElementById(Controleur);
                                                                                                    var objControle = document.getElementById(Controle);
                                                                                                   
                                                                                                           
                                                                                                             if(objControle.style.display == 'none')
                                                                                                            {
                                                                                                                    objControle.style.display='block';
                                                                                                                   
                                                                                                            }
                                                                                                           
                                                                                                           
                                                                                    }
                                                                                            </script>
                           
                                                                           
                                                                            <p>Choisissez votre race:<br/> <!-- METTRE EN CHECKED CELUI OU IL Y A LE MOINS DE MONDE!!!!!! -->
                                                                                            <label><input type="radio" id="radio_10" name="race" value="humains" onClick="GereControle('radio_10', '1');"/>Les Humains</label><br/>
                                                                                            <label><input type="radio" id="radio_20" name="race" value="deptryotes" onClick="GereControle('radio_20', '2' );"/>Les Deptryotes</label><br/>
                                                                                            <label><input type="radio" id="radio_30" name="race" value="fargus" onClick="GereControle('radio_30', '3' );"/>Les Färgus</label><br/>
                                                                                            <label><input type="radio" id="radio_40" name="race" value="zaltars" onClick="GereControle('radio_40', '4' );"/>Les Zaltars</label><br/>
                                                                                            <label><input type="radio" id="radio_50" name="race" value="nemesis" onClick="GereControle('radio_50', '5' );"/>Les Nemesis IV</label><br/></p>
                                                                                           
                                                                                           
                                                                           
                                                                                           
    <div id="1" style="display:none">
            <option value="1">Ligne 1</option>
            <option value="2">Ligne 2</option>
            <option value="3">Ligne 3</option>
    </div>
    <div id="2" style="display:none">
            <option value="1">Ligne 1</option>
            <option value="2">Ligne 2</option>
            <option value="3">Ligne 3</option>
    </div>
    <div id="3" style="display:none">
            <option value="1">Ligne 1</option>
            <option value="2">Ligne 2</option>
            <option value="3">Ligne 3</option>
    </div>
    <div id="4" style="display:none">
            <option value="1">Ligne 1</option>
            <option value="2">Ligne 2</option>
            <option value="3">Ligne 3</option>
    </div>
    <div id="5" style="display:none">
            <option value="1">Ligne 1</option>
            <option value="2">Ligne 2</option>
            <option value="3">Ligne 3</option>
    </div>


    Est-ce que vous pouvez me dire ce qui ne va pas, et ce que je dois rajouter,...

    Merci d'avance
    • Partager sur Facebook
    • Partager sur Twitter
      1 février 2006 à 21:16:27

      salut,

      essaie comme ceci:
      (une variable modifié avec son html, une variable ajoutée et une boucle "for" ).
      <script language="Javascript">
      // ==================
      //      Activations - Désactivations
      // ==================
      function GereControle(Controleur, Controle)
      {
      var objControleur = document.getElementById(Controleur);
      var objControle = document.getElementById('a'+Controle);
      var nbre =5; //ou 5 correspond au nombre de choix...


      if(objControle.style.display == 'none')
      {
              for (var i = 1; i<=nbre; i++) {document.getElementById('a'+i).style.display = 'none';
      }

      objControle.style.display='block';

       }
                                                                       
      }
       </script>

      et en changeant les Id de tes div, reprise du html
      <div id="a1" style="display:none">
              <option value="1">Ligne 1</option>
              <option value="2">Ligne 2</option>
              <option value="3">Ligne 3</option>
      </div>
      <div id="a2" style="display:none">
              <option value="1">Ligne 4</option>
              <option value="2">Ligne 5</option>
              <option value="3">Ligne 6</option>
      </div>
      <div id="a3" style="display:none">
              <option value="1">Ligne 71</option>
              <option value="2">Ligne 72</option>
              <option value="3">Ligne 73</option>
      </div>
      <div id="a4" style="display:none">
              <option value="1">Ligne 51</option>
              <option value="2">Ligne 22</option>
              <option value="3">Ligne 33</option>
      </div>
      <div id="a5" style="display:none">
              <option value="1">Ligne 1z</option>
              <option value="2">Ligne 2z</option>
              <option value="3">Ligne 3z</option>
      </div>

      a savoir qui'il est interdit de mettre comme premier ou unique caracteres un chiffre a une class ou id ...


      a plus
      • Partager sur Facebook
      • Partager sur Twitter

      fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

      [JS] afficher plusieurs choses en fonction d'un bouton radio

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown