[DOM] limiter le coche des cases à cocher

Version imprimable

05/02/2008, 11h06
Interface

[DOM] limiter le coche des cases à cocher

Bonjour

Pour la comparaison des produits il ya des cases à cocher alors l'internaute peux cliquer au miximum 3 case à cocher une fois qu'il clike sur une 4ème case il doit avoir un message lui disant qu'il a depasser le nombre de case qu'il pouvait cocher.

Pouvez vous m'aider SVP
Merci

Salut :)
En prenant le cas ou tes cases à cochées se trouvent dans une div avec un id :

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
 
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function checkLesBox(macheckBox){
	var listeInput = document.getElementById('tadiv').getElementsByTagName('input');
	var nbCheckBocChecked =  0;
	for(var i = 0; i < listeInput.length ; i++ ){
		if(listeInput[i].type == "checkbox" && listeInput[i].checked){
			nbCheckBocChecked ++;
		}
	}
	if(nbCheckBocChecked > 3){
		alert("Vous ne pouvez coché que 3 cases");
		macheckBox.checked = false;
	}
 
}
</script>
</head>
 
<body>
<div id="tadiv">
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
</div>
</body>
</html>

bon courage

05/02/2008, 12h23
Interface

les checkbox sont générer dynamiquement le nombre dépends du nombre de ligne des resultats de la requête et c dans chaque ligne du tableau donc pas dans une même div
05/02/2008, 12h45
le_chomeur

dans ce sac la tu as juste a adapter ma fonction en utilisant chaque ligne du tableau :)
tu remontes a partir de la checkbox jusqu'a trouvé le tr ( via le dom parentNode .... ) puis tu récupères uniquement les checkbox de cette ligne , c'est très simple donc je te laisse chercher un peu :)
05/02/2008, 13h01
Interface

membre éclaré éclaire moi stp. mais jè compris je vais fouiner un peu

voila ... :)

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
69
70
71
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function checkLesBox(macheckBox){
	ligne = returnTrParent(macheckBox);
	var listeInput = ligne.getElementsByTagName('input');
	var nbCheckBocChecked =  0;
	for(var i = 0; i < listeInput.length ; i++ ){
		if(listeInput[i].type == "checkbox" && listeInput[i].checked){
			nbCheckBocChecked ++;
		}
	}
	if(nbCheckBocChecked > 3){
		alert("Vous ne pouvez coché que 3 cases");
		macheckBox.checked = false;
	}
 
}
 
function returnTrParent(element){
	var temp = null;
	var elemParent = element.parentNode ;
	if(elemParent.tagName == "TR"){
		elemParent = elemParent;
	}
	else if(elemParent.tagName == "TABLE"){
		alert("Ligne non trouvée");
		elemParent = null;
	}
	else{
		temp = returnTrParent(elemParent);
	}
	return elemParent;
}
</script>
</head>
 
<body>
<div id="tadiv">
<table>
<tbody>
<tr><td>
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	</td>
</tr>
<tr><td>
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	</td>
</tr>
<tr><td>
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	<input type="checkbox" onchange="checkLesBox(this)" />
	</td>
</tr>	
</tbody>
</table>
</div>
</body>
</html>

05/02/2008, 15h35
Interface

j'y étai presque mais merci pour le tuyo.
06/02/2008, 18h01
Interface

merci j'ai testé et ça marche :yaisse2: