Afficher un message d'alerte dès que la sixième case est cochée

Version imprimable

Bonjour,

Le code ci-dessous permet d'afficher un message d'alerte si le client clique plus de 5 cases :
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 <script type="text/javascript">  </script> dans le form : <input type="checkbox" name="specialite" value="1" id="1" onclick="testCheck(this)"';>
Le problème c'est que si j'affiche ensuite les 5 cases cochées, après avoir récupéré les avoir id depuis la BD, alors le client peut de nouveau en cocher 5, ce qui peut nous en faire jusqu'à 10.

Donc au premier affichage, le gars peut cliquer 5 cases maxi, ça c'est bon.
Mais ensuite quand la liste s'affiche et que les 5 cases choisies auparavant sont maintenant cochées, alors là le gars doit avoir le message d'alerte dès la sixième case cochée.

J'ai besoin d'aide pour ça, parce que je suis (très) nul en javascript et on m'avait aidé à faire le script ci-dessus.

Merci d'avance.

16/01/2007, 16h18
SpaceFrog

heu les 5 premières j'ai à peu près compris ... mais les cinq suivantes je vois plus là ...

ton code marche bien si il y a 6 checks sur la page ...
16/01/2007, 16h35
JackBeauregard

Ok, je réexplique.

1)
- J'ai une page avec 30 checkbox.
- T'arrives sur la page.
- T'en cliques de 1 à 5 c'est ok.
- Si t'en cliques une sixième, l'alerte se déclenche.
- Tu valides le formulaire.
2)
- Tu reviens sur la page.
- Les 1 à 5 cases que tu avais sélectionné apparaîssent déjà cochées.
- Si tu en avais choisi qu'une, elle apparait donc déjà cochée.
- La logique veut donc que tu puisses maintenant en cocher 4 autres.
- Mais pas de pot, le script t'autorise à en choisir 5 autre et là seulement il affiche l'alert. Mais du coup t'en a 6 au lieu de 5, la limite est franchie.

Donc le script doit détecter le nombre de case éventuellement déjà cochées :?

pour commencer ... un id doit être unique sur la page !!!!

ensuite passe par la collection des names ...

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
<!--
var numCheck = 0;
var checkMax = 5;
 
function testCheck(obj)
{
 numCheck=0
 var checkSetName=obj.name
 var checkSet=document.getElementsByName(checkSetName)
 
 for (i=0;i<checkSet.length;i++){
  	if (checkSet[i].checked){
  		   numCheck++;}
 
   if (numCheck>checkMax)     {
        		alert("Vous pouvez indiquer jusqu'à 5 spécialités.");
        		obj.checked = false;
            }
 
  }
 
  document.getElementById("idOut").innerHTML = numCheck +" cases cochées";
}
//-->
</script>
</head>
 
 
 
<body>
 
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="specialite" value="1"  onclick="testCheck(this)";><br/>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
<input type="checkbox" name="aa" value="1"  onclick="testCheck(this)";>
 
<div id='idOut'></div>
</body>
 
</html>