afficher les valeurs sélectionnées de boutons radio

Version imprimable

05/01/2011, 08h22
Esperence

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
05/01/2011, 08h49
vermine

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. ;)

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:

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>

09/01/2011, 08h12
Esperence

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
09/01/2011, 10h18
NoSmoking

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.

voila mon code

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

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:

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>