debutant selection checkbox

**burndev** · 09/03/2010, 16h45

bonjour,

dans le cadre de mon apprentissage en javascript, je cherche a récupérer la valeur lors du clic sur un checkbox.

pour la validation du formulaire cela fonctionne. Mais pour la sélection individuel je ne comprend pas ce qu'il ne colle 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<title>Untitled Document</title>
		<script type="text/javascript">
			//<!CDATA[
			window.onload=setupEvents;
			function setupEvents(evnt){
				document.someForm.onsubmit=checkForm;
				document.someForm.ckbox.onclick=dcheckBox;
			}
 
			function dcheckBox(evnt){
				var buttons = document.someForm.ckbox;
 
				for(var i=0;i<buttons.length; i++){
					if(buttons[i].checked){
						alert(buttons[i].value);
						//txtSelect.value = buttons[i].value;
					}
				}
				//Pas de traitement côté serveur : annuler l'envoi
				return false;				
			}
 
			function checkForm(evnt){
				var buttons = document.someForm.ckbox;
 
				for(var i=0;i<buttons.length; i++){
					if(buttons[i].checked){
						alert(buttons[i].value);
					}
				}
				//Pas de traitement côté serveur : annuler l'envoi
				return false;
			}
			//]]>
		</script>
	</head>
	<body>
		<p>Sélection cases a cocher</p>
		<form name="someForm" action="">
			<input type="checkbox" name="ckbox" value="checkBox1" /> checkbox 1
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox2" /> checkbox 2
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox3" /> checkbox 3
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox4" /> checkbox 4
			<br/>
			<input type="submit" value="Envoyer" />
		</form>
	</body>
</html>

merci

**le_chomeur** · 09/03/2010, 17h56

le nom de tes checkbox n'est pas bon :

ckbox remplace par ckbox[]

**burndev** · 09/03/2010, 18h14

je ne vois pas pourquoi il faut nommé les checkbox de cette façon, puisque lors de la validation du formulaire, il sont identifié checked

**le_chomeur** · 10/03/2010, 08h58

en fait ilS ne sont pas identifiés, uniquement celui que tu aura coché,
et comme tu a le même nom , il te faut créer un tableau puis parcourir quelle valeur est envoyée ...

**burndev** · 10/03/2010, 11h37

Le concept du tableau que tu met en avant est valable avec l'utilisation (java script et d'un langage serveur(php, asp,...)).

j'ai malgré tout suivi ton conseil mais uniquement pour attribué l'évènement au chargement.
Maintenant quand je clic un checkbox, il ne reste pas checked.

je procède de cette façon

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<title>Untitled Document</title>
		<script type="text/javascript">
			//<!CDATA[
			window.onload=setupEvents;
 
			function setupEvents(evnt){
				document.someForm.onsubmit=checkForm;
 
				var buttons = document.someForm.ckbox;
				for(var i=0;i<buttons.length;i++){
					buttons[i].onclick=dcheckBox;	
				}
 
			}
 
			function dcheckBox(evnt){
				var buttons = document.someForm.ckbox;
				var txtSelect = document.someForm.textSelect;
 
				txtSelect.value = "";
 
				for(var i=0;i<buttons.length; i++){
					if(buttons[i].checked){
						txtSelect.value += buttons[i].value;
					}
				}
				//Pas de traitement côté serveur : annuler l'envoi
				return false;				
			}
 
			function checkForm(evnt){
				var buttons = document.someForm.ckbox;
 
				for(var i=0;i<buttons.length; i++){
					if(buttons[i].checked){
						alert(buttons[i].value);
					}
				}
				//Pas de traitement côté serveur : annuler l'envoi
				return false;
			}
			//]]>
		</script>
	</head>
	<body>
		<p>Sélection cases a cocher</p>
		<form name="someForm" action="">
			<p><input type="checkbox" name="ckball" value="" />décoche tout</p>
 
			<input type="checkbox" name="ckbox" value="checkBox1" /> checkbox 1
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox2" /> checkbox 2
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox3" /> checkbox 3
			<br/>
			<input type="checkbox" name="ckbox" value="checkBox4" /> checkbox 4
			<br/>
			<input type="text" name="textSelect" />
			<input type="submit" value="Envoyer" />
		</form>
	</body>
</html>

**E.Bzz** · 10/03/2010, 11h41

Bonjour,
dans dcheckBox(evnt) :

Code :

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

1
2
//Pas de traitement côté serveur : annuler l'envoi
return false;

Ce n'est pas l'envoi que tu annules mais le click sur la checkbox.
Enlève le

Code :

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

return false;

A+

**burndev** · 10/03/2010, 11h59

Cela fonction a merveille et d'une logique déconcertante.
merci beaucoup

debutant selection checkbox

JavaScript

Discussions similaires

Partager

Partager