debutant selection checkbox

Version imprimable

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:

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

09/03/2010, 17h56
le_chomeur

le nom de tes checkbox n'est pas bon :

ckbox remplace par ckbox[]
09/03/2010, 18h14
burndev

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
10/03/2010, 08h58
le_chomeur

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

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:

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>

10/03/2010, 11h41
E.Bzz
Bonjour,
dans dcheckBox(evnt) :
Code:

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:

return false;

A+
10/03/2010, 11h59
burndev

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