Afficher un bloc div en fonction de bouton radio

Version imprimable

Bonjour à tous,

je souhaite créer un formulaire avec des boutons radio.
En fonction du bouton sélectionné, je souhaite afficher le bloc div correspondant.

Voici ma vue:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
       <head> <script src="js/choix_graphe.js"></script>  </head>
	<body>
		<h2>Veuillez choisir la classe de graphe:</h2>
                <label>Classe de graphe</label></br>
		<input id="a" type="radio" name="type" value="Etoile" onclick="choix();">Etoile</br>
		<input id="b" type="radio" name="type" value="Chemin" onclick="choix();">Chemin</br>
		<input id="c" type="radio" name="type" value="Complet" onclick="choix();">Complet</br>
		<input id="d" type="radio" name="type" value="Hypercube" onclick="choix();">Hypercube</br>
		<input id="e" type="radio" name="type" value="Grille2D" onclick="choix();">Grille2D</br>
		<input id="f" type="radio" name="type" value="Tor" onclick="choix();">Tor</br>
		<input id="g" type="radio" name="type" value="Papadimitriou" onclick="choix();">Papadimitriou</br>
		<input id="h" type="radio" name="type" value="Papadimitriou tronque" onclick="choix();">Papadimitriou tronque</br>
		<input id="i" type="radio" name="type" value="Biparti complet" onclick="choix();">Biparti complet</br>
		<input id="j" type="radio" name="type" value="Aleatoire" onclick="choix();">Aleatoire</br>
		<input id="k" type="radio" name="type" value="Aleatoire Edge" onclick="choix();">Aleatoire Edge</br>
		<input id="l" type="radio" name="type" value="Arbre" onclick="choix();">Arbre</br>
		<input id="m" type="radio" name="type" value="Biparti regulier" onclick="choix();">Biparti regulier</br>
		<input id="n" type="radio" name="type" value="Regulier" onclick="choix();">Regulier</br>
		</br>
		</br>
		<div id="div_a" style="display:none" >
		    <label>Nombre de sommets (max 100):</label>
	            <input type="text" name="nombreSommet" value="">
			</br>
			</br>
			<label>Graphe oriente</label>
			<input type="radio" name="oui" value="oui" checked>Oui
			<input type="radio" name="oui" value="oui">Non
			</br>
			</br>
			<label>Graphe pondere</label>
			<input type="radio" name="oui1" value="oui" checked>Oui
			<input type="radio" name="oui1" value="oui">Non
			</br>
			</br>
		</div>
                <div id="div_b" style="display:none" >
                </div>
	</body>
</html>

Voici mon code javascript:

Code:

1
2
3
4
5
6
7
8
function choix(){
	if(document.getElementById("a").checked == true){
                document.getElementById("div_a").style.display="inline";
        }
        else{
                document.getElementById("div_a").style.display="none";
        }
}

Or lorsque je sélectionne le premier bouton radio, rien ne se passe...

Pourriez me dire quelle est mon erreur s'il vous plaît?

Bonjour,

Voici ma dernière version, ça ne fonctionne toujours pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!DOCTYPE html>
 
<html>
       <head> <script src="js/choix_graphe.js"></script>  </head>
 
	<body>
		<h2>Veuillez choisir la classe de graphe:</h2>
 
 
                <label>Classe de graphe</label></br>
		<input id="a" type="radio" name="type" value="Etoile" onclick='choix("a");'>Etoile</br>
		<input id="b" type="radio" name="type" value="Chemin" onclick='choix("b");'>Chemin</br>
		<input id="c" type="radio" name="type" value="Complet" onclick='choix("c");'>Complet</br>
		<input id="d" type="radio" name="type" value="Hypercube" onclick='choix("d");'>Hypercube</br>
		<input id="e" type="radio" name="type" value="Grille2D" onclick='choix("e");'>Grille2D</br>
		<input id="f" type="radio" name="type" value="Tor" onclick='choix("f");'>Tor</br>
		<input id="g" type="radio" name="type" value="Papadimitriou" onclick='choix("g");'>Papadimitriou</br>
		<input id="h" type="radio" name="type" value="Papadimitriou tronque" onclick='choix("h");'>Papadimitriou tronque</br>
		<input id="i" type="radio" name="type" value="Biparti complet" onclick='choix("i");'>Biparti complet</br>
		<input id="j" type="radio" name="type" value="Aleatoire" onclick='choix("j");'>Aleatoire</br>
		<input id="k" type="radio" name="type" value="Aleatoire Edge" onclick='choix("k");'>Aleatoire Edge</br>
		<input id="l" type="radio" name="type" value="Arbre" onclick='choix("l");'>Arbre</br>
		<input id="m" type="radio" name="type" value="Biparti regulier" onclick='choix("m");'>Biparti regulier</br>
		<input id="n" type="radio" name="type" value="Regulier" onclick='choix("n");'>Regulier</br>
 
		</br>
		</br>
 
 
		<div id="div_a" style="display:none" >
 
		    <label>Nombre de sommets (max 100):</label>
	            <input type="text" name="nombreSommet" value="">
 
			</br>
			</br>
 
			<label>Graphe oriente</label>
			<input type="radio" name="oui" value="oui" checked>Oui
			<input type="radio" name="oui" value="oui">Non
 
			</br>
			</br>
 
			<label>Graphe pondere</label>
			<input type="radio" name="oui1" value="oui" checked>Oui
			<input type="radio" name="oui1" value="oui">Non
 
			</br>
			</br>
 
		</div>
 
                 <div id="div_b" style="display:none" >
                 </div>
 
                 <div id="div_c" style="display:none" >
                 </div>
 
                 <div id="div_d" style="display:none" >
                 </div>
 
                  <div id="div_e" style="display:none" >
                 </div>
 
                   <div id="div_f" style="display:none" >
                 </div>
 
                   <div id="div_g" style="display:none" >
                 </div>
 
                <div id="div_h" style="display:none" >
                 </div>
 
                 <div id="div_i" style="display:none" >
                 </div>
 
                 <div id="div_j" style="display:none" >
                 </div>
 
                 <div id="div_k" style="display:none" >
                 </div>
 
                 <div id="div_l" style="display:none" >
                 </div>
 
                 <div id="div_m" style="display:none" >
                 </div>
 
                 <div id="div_n" style="display:none" >
                 </div>
 
	</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
 
	function choix(a){
 
            if(document.getElementById(a).checked == true){
 
                document.getElementById(div_a).style.visibility = "";
             }
             else{
 
                document.getElementById(div_a).style.visibility = "hidden";
             }      	
	}
</script>

Finalement mon problème est résolu tout fonctionne sauf mon src...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
 
<html>
<head> </head>
 
 
	<body>
 
                <script type="text/javascript">
 
	function choix(id){
 
           for( var i = 1; i <= 14; i++){
 
               if(i == id){
 
                   document.getElementById('div_'+ i).style.display = 'block';
               }
               else{
                    document.getElementById('div_'+ i).style.display ='none';
 
                }
           } 
 
	}
</script>                
		<h2>Veuillez choisir la classe de graphe:</h2>
 
                <form>
 
                <label>Classe de graphe</label></br>
		<input  type="radio" name="type" value="Etoile" onclick="choix(1)"/>Etoile</br>
		<input  type="radio" name="type" value="Chemin" onclick="choix(2)"/>Chemin</br>
		<input  type="radio" name="type" value="Complet" onclick="choix(3)"/>Complet</br>
		<input  type="radio" name="type" value="Hypercube" onclick="choix(4)"/>Hypercube</br>
		<input  type="radio" name="type" value="Grille2D" onclick="choix(5)"/>Grille2D</br>
		<input  type="radio" name="type" value="Tor" onclick="choix(6)"/>Tor</br>
		<input  type="radio" name="type" value="Papadimitriou" onclick="choix(7)"/>Papadimitriou</br>
		<input  type="radio" name="type" value="Papadimitriou tronque" onclick="choix(8)"/>Papadimitriou tronque</br>
		<input  type="radio" name="type" value="Biparti complet" onclick="choix(9)"/>Biparti complet</br>
		<input  type="radio" name="type" value="Aleatoire" onclick="choix(10)"/>Aleatoire</br>
		<input  type="radio" name="type" value="Aleatoire Edge" onclick="choix(11)"/>Aleatoire Edge</br>
		<input  type="radio" name="type" value="Arbre" onclick="choix(12)"/>Arbre</br>
		<input  type="radio" name="type" value="Biparti regulier" onclick="choix(13)"/>Biparti regulier</br>
		<input  type="radio" name="type" value="Regulier" onclick="choix(14)"/>Regulier</br>
 
		</br>
		</br>
 
                </form>
 
		<div id="div_1" style="display:none" >
 
		    <label>Nombre de sommets (max 100):</label>
	            <input type="text" name="nombreSommet" value="">
 
			</br>
			</br>
 
			<label>Graphe oriente</label>
			<input type="radio" name="oui" value="oui" checked>Oui
			<input type="radio" name="oui" value="oui">Non
 
			</br>
			</br>
 
			<label>Graphe pondere</label>
			<input type="radio" name="oui1" value="oui" checked>Oui
			<input type="radio" name="oui1" value="oui">Non
 
			</br>
			</br>
 
		</div>
 
                 <div id="div_2" style="display:none" >
                 </div>
 
                 <div id="div_3" style="display:none" >
                 </div>
 
                 <div id="div_4" style="display:none" >
                 </div>
 
                  <div id="div_5" style="display:none" >
                 </div>
 
                   <div id="div_6" style="display:none" >
                 </div>
 
                   <div id="div_7" style="display:none" >
                 </div>
 
                <div id="div_8" style="display:none" >
                 </div>
 
                 <div id="div_9" style="display:none" >
                 </div>
 
                 <div id="div_10" style="display:none" >
                 </div>
 
                 <div id="div_11" style="display:none" >
                 </div>
 
                 <div id="div_12" style="display:none" >
                 </div>
 
                 <div id="div_13" style="display:none" >
                 </div>
 
                 <div id="div_14" style="display:none" >
                 </div>
 
 
 
 
	</body>
 
</html>

Bonjour ,
je sais que ta discussion est résolue mais si tu es intéressé par une autre approche je te propose de faire du jquery
dans ce cas tu attribue la même Class (ex: choixTaux ) à tes inputs radio et lors de l’événement Click
Code:

1 2 3 4 $('.choixTaux').click(function() { $('input:radio[checked=false]').css({"display":"none"});//cacher les div non sélectionnées et donc l'ancienne div affichée if($(this).val() === 'valeur_de_la_div') $('#nom_de_la_div').show();// test à reiterer avec toutes les inputs
je t'ai juste mis sur la voie; ce code je ne l'ai pas testé
Bonne journée

12/05/2014, 12h00
sarafati

Merci beaucoup j'essayerai sans doute!