Afficher un bloc div en fonction de bouton radio

**sarafati** · 11/05/2014, 22h03

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**sarafati** · 12/05/2014, 10h37

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**sarafati** · 12/05/2014, 11h13

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**johnlobs** · 12/05/2014, 11h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sarafati** · 12/05/2014, 12h00

Merci beaucoup j'essayerai sans doute!

Afficher un bloc div en fonction de bouton radio

JavaScript

Vue hybride

Discussions similaires

Partager

Partager