Input radio affiche contenu(X)

Logiciel & apps Programmation
1

Bonjour.
J’ai quatre input radio, et j’aimerai que à chaque fois qu’on clic sur l’une d’elle, cela affiche un contenu qui lui est approprié.
J’ai trouvé en recherchant sur internet ce système à deux fonctions (Oui/Non).
Pourriez-vous me donner un exemple des plus basic que je puisse modifier.


<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="radio" name="radio" id="premier" value="premier" />
  </label>
  <label>
  <input type="radio" name="radio" id="deuxieme" value="deuxieme" />
  </label>
  <label>
  <input type="radio" name="radio" id="troisieme" value="troisieme" />
  </label>
  <label>
  <input type="radio" name="radio" id="quatrieme" value="quatrieme" />
  </label>
</form>

Ceci c’est le code des input radio.
Merci d’avance.

Cordialement.

2

Excusez moi d’insister, mais on ne m’a pas répondu …

Merci d’avance,
Cordialement.

4

Oui en effet, j’ai cherché sur Google, avec à peu prés les memes mots clés.
J’ai trouvé par exemple ce code:


<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function met(btn,champ1,champ2)
{
 if (btn.checked)
   {
    document.getElementById(champ1).style.display="inline";
 document.getElementById(champ2).style.display="none";
   }
 else {
    document.getElementById(champ1).style.display="none";
 document.getElementById(champ2).style.display="display";
   }
}
</script>
</HEAD>
<BODY>
 
<input type="radio" name="tem" value="oui" id="chkb_10"
  onclick="met(this,'texte_10','texte_20');" > <label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text"
  style="display:none"
  id="texte_10" value="Contenu de texte_10"><br />
 
<input type="radio" id="chkb_20" value="non" name="tem"
  onclick="met(this,'texte_20','texte_10');" > <label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text"
  style="display:none"
  id="texte_20" value="Contenu de texte_20"><br />
 
</BODY>
</HTML>

J’aimerai que au lieu de deux bouton, le système fonctionne avec 4. Je ne me connais pas du tout en JavaScript, donc j’aimerai bien savoir comment le coder…

Merci d’avance,
Cordialement.

5

salut te donner un script complet avec toute les explication serait un peux long je te met ce liens d’un site specialiser en jevescript
tres bien expliquer dont tu aura souvent besoin :
ici
tu devra jouer avec la method

document.getElementById().

bon courage…

6

Est-ce que c’est ça


<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function met(btn,champ1,champ2,champ3,champ4)
{
 if (btn.checked)
 {
 document.getElementById(champ1).style.display="inline";
 document.getElementById(champ2).style.display="none";
 document.getElementById(champ3).style.display="none";
 document.getElementById(champ4).style.display="none"
 }
 else {
 document.getElementById(champ1).style.display="none";
 document.getElementById(champ2).style.display="display";
 document.getElementById(champ3).style.display="none"
 document.getElementById(champ4).style.display="none"
 }
 else  {
 document.getElementById(champ1).style.display="none";
 document.getElementById(champ2).style.display="none"
 document.getElementById(champ3).style.display="display";
 document.getElementById(champ4).style.display="none";
 }
 else  {
 document.getElementById(champ1).style.display="none";
 document.getElementById(champ2).style.display="none"
 document.getElementById(champ3).style.display="none"
 document.getElementById(champ4).style.display="display";
 }
}
</script>
</HEAD>
<BODY>
 
<input type="radio" name="tem" value="oui" id="chkb_10"
 onclick="met(this,'texte_10','texte_20');" > <label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text"
 style="display:none"
 id="texte_10" value="Contenu de texte_10"><br />
 
<input type="radio" id="chkb_20" value="non" name="tem"
 onclick="met(this,'texte_20','texte_10');" > <label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text"
 style="display:none"
 id="texte_20" value="Contenu de texte_20"><br />

<input type="radio" id="chkb_30" value="non" name="tem"
 onclick="met(this,'texte_30','texte_10');" > <label for="chkb_30">Contrôle de "texte_30"</label>
<input type="text"
 style="display:none"
 id="texte_30" value="Contenu de texte_30"><br />

<input type="radio" id="chkb_40" value="non" name="tem"
 onclick="met(this,'texte_40','texte_10');" > <label for="chkb_40">Contrôle de "texte_40"</label>
<input type="text"
 style="display:none"
 id="texte_40" value="Contenu de texte_40"><br />
 
</BODY>
</HTML>

Je pense que c’est pas parfait, serait-il possible de corriger mes erreurs ?

Merci d’avance,
Cordialement.

7

bon pour etre sur de comprendre .
en gros tu as quatre champ different associer chaq’un a un champ radio different .
quand tu clique sur le champ1 le text s’affiche et un autre est afficher il devient cacher ?

tu pourais fair comme ceci ce n’est certainenment pas la meilleur solution je debute en javascript mois aussi


<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function AfficherChamp(id_actif,champ1,champ2,champ3)
{
    if(document.getElementById(id_actif).style.display == "none")
    {
         document.getElementById(id_actif).style.display = 'inline";
    }
    else
    {
        document.getElementById(id_actif).style.display = 'none';
    }
     document.getElementById(champ1).style.display = 'none';
     document.getElementById(champ2).style.display = 'none';
     document.getElementById(champ3).style.display = 'none';
}
</script>
</head>
<body>
<input type="radio" name="tem"  value="oui"  id="chkb_10"
                       onclick=" AfficherChamp('chkb_10','texte_20',,'texte_20,,'texte_30);" >
<label for="chkb_10">Contrôle de "texte_10"</label>

<input type="radio" name="tem"  value="oui"  id="chkb_20"
                       onclick=" AfficherChamp('chkb_20','texte_10',,'texte_30,,'texte_40);" >
<label for="chkb_20">Contrôle de "texte_20"</label>

<input type="radio" name="tem"  value="oui"  id="chkb_30"
                       onclick=" AfficherChamp('chkb_30','texte_10',,'texte_20,,'texte_40);" >
<label for="chkb_30">Contrôle de "texte_30"</label>

<input type="radio" name="tem"  value="oui"  id="chkb_40"
                       onclick=" AfficherChamp('chkb_40','texte_10',,'texte_20,,'texte_30);" >
<label for="chkb_40">Contrôle de "texte_40"</label>
</body>
il y asurement une meilleur soluce j'y reflechechi a plus
8

Coucou!

Excusez moi j’ai pas préciser, j’ai demander ailleurs et on m’a régler le problème.

Merci quand même,
Cordialement.