afficher les valeurs sélectionnées de boutons radio

Esperence · 05/01/2011, 08h22

bonjour,
je voudrais generer les choix de cases a cocher et d une liste deroulante dans une page html dans une zone de text dans le bas de la page a l aide de javascript

exemple

les cases a cocher
() Paris
(X) montreal
() londre
() chipre

menu deroulant

test 1
test 2
X test 3
test 4
test 4

donc mes choix est montreal et test 3
je voudrai que s affiche dans une zone de text en bas de la page ... genre

zone de text
------------------
Montreal
test 3
------------------

merci d avance

vermine · 05/01/2011, 08h49

Bonjour,

Vous pouvez faire une recherche dans la Faq. Vous y trouverez des bouts de codes intéressants ainsi que des explications sur les diverses manipulations de ces éléments.

Le principe est de déclencher une même fonction sur le onclick des cases à cocher et sur le onchange des listes déroulantes. Cette fonction irait récupérer les valeurs pour les afficher dans une zone prédéfinie.

Attention, le libellé d'une case à cocher n'est pas nécessairement lié à la case. Passez par un <label> ?

Utilisez les notions d'id, .value, de .innerHTML, de .text, ainsi que les méthodes telles que getElementsByName ou bien getElementById. Plusieurs exemples se trouvent sur ce forum.

Bon travail et postez-nous vos essais.

SpaceFrog · 05/01/2011, 08h51

il serait sans doute plus judicieux ici d'utiliser des boutons radios plutot que des cases à cocher au vu de la description de l'ergonomie ...

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
<script type="text/javascript">
function  showsel(ok){
if(ok){
selection=getRadioValue("ville")+"<br/>"+getRadioValue('autre')
document.getElementById('choix').innerHTML=selection
}
}
 
function getRadioValue(rname){
colradio=document.getElementsByName(rname)
var i=-1;
 
while( colradio[++i]){
if(colradio[i].checked){ return colradio[i].value;}
}
return ''
}
</script>
</head>
 
<body>
 
 
<input type='radio' name="ville" value="Paris" id="Paris" onclick="showsel(this.checked)"  /><label for="Paris"  >Paris</label><br/>
<input type='radio' name="ville" value="Montreal" id="Montreal"  onclick="showsel(this.checked)" /><label for="Montreal" >Montreal</label><br/>
<input type='radio' name="ville" value="Londres" id="Londres" onclick="showsel(this.checked)" /><label for="Londres"  >Londres</label><br/>
<input type='radio' name="ville" value="Chipre" id="Chipre" onclick="showsel(this.checked)"/><label for="Chipre" >Chipre</label><br/>
<br/>
<input type='radio' name="autre" value="test1" id="test1" onclick="showsel(this.checked)" /><label for="test1" >test 1</label><br/>
<input type='radio' name="autre" value="test2" id="test2" onclick="showsel(this.checked)"/><label for="test2">test 2</label><br/>
<input type='radio' name="autre" value="test3" id="test3" onclick="showsel(this.checked)" /><label for="test3"  >test 3</label><br/>
<input type='radio' name="autre" value="test4" id="test4" onclick="showsel(this.checked)" /><label for="test4"  >test 4</label><br/>
<br/>
<div id="choix"></div>

Esperence · 09/01/2011, 08h12

merci bcp pour vos reponses
j ai une autre questions si je veux ajouter un boutton pis qu il efface tout les boutton radio que j'ai coché que dois-je faire
merci bcp

NoSmoking · 09/01/2011, 10h18

Bonjour,
il existe plusieurs méthodes, mais sans la structure de ton document...

- button type="reset" si l'ensemble est contenu dans une form

- récupération des input type="radio" et remise de checked à false, sans opublier de remettre le innerHTML à vide

et sûrement d'autre suivant, je le répètes, la structure de ton document.

Esperence · 09/01/2011, 22h01

voila mon code

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
<script type="text/javascript">
function  showsel(ok){
if(ok){
selection=getRadioValue("ville")+"<br/>"+getRadioValue('autre')
document.getElementById('choix').innerHTML=selection
}
}
 
function getRadioValue(rname){
colradio=document.getElementsByName(rname)
var i=-1;
 
while( colradio[++i]){
if(colradio[i].checked){ return colradio[i].value;}
}
return ''
}
</script>
</head>
 
<body>
 
 
<input type='radio' name="ville" value="Paris" id="Paris" onclick="showsel(this.checked)"  /><label for="Paris"  >Paris</label><br/>
<input type='radio' name="ville" value="Montreal" id="Montreal"  onclick="showsel(this.checked)" /><label for="Montreal" >Montreal</label><br/>
<input type='radio' name="ville" value="Londres" id="Londres" onclick="showsel(this.checked)" /><label for="Londres"  >Londres</label><br/>
<input type='radio' name="ville" value="Chipre" id="Chipre" onclick="showsel(this.checked)"/><label for="Chipre" >Chipre</label><br/>
<br/>
<input type='radio' name="autre" value="test1" id="test1" onclick="showsel(this.checked)" /><label for="test1" >test 1</label><br/>
<input type='radio' name="autre" value="test2" id="test2" onclick="showsel(this.checked)"/><label for="test2">test 2</label><br/>
<input type='radio' name="autre" value="test3" id="test3" onclick="showsel(this.checked)" /><label for="test3"  >test 3</label><br/>
<input type='radio' name="autre" value="test4" id="test4" onclick="showsel(this.checked)" /><label for="test4"  >test 4</label><br/>
<br/>
<div id="choix"></div>

je veux ajouter un boutton en bas qui peut supprimer mes selections

mercii

NoSmoking · 10/01/2011, 13h27

attendu que ta structure n'a pas l'air figée, puisque tu reprends celle de SpaceFrog, l'ajout d'un input type="reset" me semble le plus simple, et ce en mettant tes inputs dans une form

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<form action=""> 
<input type='radio' name="ville" value="Paris" id="Paris" onclick="showsel(this.checked)"  /><label for="Paris"  >Paris</label><br/>
<input type='radio' name="ville" value="Montreal" id="Montreal"  onclick="showsel(this.checked)" /><label for="Montreal" >Montreal</label><br/>
<input type='radio' name="ville" value="Londres" id="Londres" onclick="showsel(this.checked)" /><label for="Londres"  >Londres</label><br/>
<input type='radio' name="ville" value="Chipre" id="Chipre" onclick="showsel(this.checked)"/><label for="Chipre" >Chipre</label><br/>
<br/>
<input type='radio' name="autre" value="test1" id="test1" onclick="showsel(this.checked)" /><label for="test1" >test 1</label><br/>
<input type='radio' name="autre" value="test2" id="test2" onclick="showsel(this.checked)"/><label for="test2">test 2</label><br/>
<input type='radio' name="autre" value="test3" id="test3" onclick="showsel(this.checked)" /><label for="test3"  >test 3</label><br/>
<input type='radio' name="autre" value="test4" id="test4" onclick="showsel(this.checked)" /><label for="test4"  >test 4</label><br/>
<br/>
<input type="reset" value="Effacer" />
</form>

05/01/2011, 08h22	#1
Esperence Invité de passage Inscription : mai 2007 Messages : 5 Détails du profil Informations forums : Inscription : mai 2007 Messages : 5 Points : 0 Points : 0	afficher les valeurs sélectionnées de boutons radio bonjour, je voudrais generer les choix de cases a cocher et d une liste deroulante dans une page html dans une zone de text dans le bas de la page a l aide de javascript exemple les cases a cocher () Paris (X) montreal () londre () chipre menu deroulant test 1 test 2 X test 3 test 4 test 4 donc mes choix est montreal et test 3 je voudrai que s affiche dans une zone de text en bas de la page ... genre zone de text ------------------ Montreal test 3 ------------------ merci d avance
	00

05/01/2011, 08h49	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	Bonjour, Vous pouvez faire une recherche dans la Faq. Vous y trouverez des bouts de codes intéressants ainsi que des explications sur les diverses manipulations de ces éléments. Le principe est de déclencher une même fonction sur le onclick des cases à cocher et sur le onchange des listes déroulantes. Cette fonction irait récupérer les valeurs pour les afficher dans une zone prédéfinie. Attention, le libellé d'une case à cocher n'est pas nécessairement lié à la case. Passez par un <label> ? Utilisez les notions d'id, .value, de .innerHTML, de .text, ainsi que les méthodes telles que getElementsByName ou bien getElementById. Plusieurs exemples se trouvent sur ce forum. Bon travail et postez-nous vos essais. __________________ Elen Poukram - Isegoria - Sandawe
	00

09/01/2011, 08h12	#4
Esperence Invité de passage Inscription : mai 2007 Messages : 5 Détails du profil Informations forums : Inscription : mai 2007 Messages : 5 Points : 0 Points : 0	merci bcp pour vos reponses j ai une autre questions si je veux ajouter un boutton pis qu il efface tout les boutton radio que j'ai coché que dois-je faire merci bcp
	00

09/01/2011, 10h18	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 926 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 926 Points : 4 737 Points : 4 737	Bonjour, il existe plusieurs méthodes, mais sans la structure de ton document... - button type="reset" si l'ensemble est contenu dans une form - récupération des input type="radio" et remise de checked à false, sans opublier de remettre le innerHTML à vide et sûrement d'autre suivant, je le répètes, la structure de ton document.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email