restreindre choix dans cases à cocher

Version imprimable

03/12/2008, 19h57
rglot

restreindre choix dans cases à cocher

bonsoir,
Comment gérer les choix multiples de cases à cocher (checkbox) d'un formulaire, de manière à limiter le nombre de coches possible pour l'utilisateur.
(exemple : limiter à 3 dans un groupe de 10 checkboxs) ?

- soit par un paramétrage de checkbox (si ça existe)
- soit par un script javascript qui empèche de cocher une 4 ème case.

bonjour,

voici un exemple avec 4 cases à cocher au maximum (le nombre de cases maximum à cocher est défini dans la variable nbMaxChk):

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--  
var nbMaxChk = 4; // nombre maximum de cases à cocher
 
var compteChk = 0; // nombre de cases cochées
function cocher(objet)
{
  if (objet.checked)
  {
    if (compteChk==nbMaxChk)
      objet.checked = false;
    else
      compteChk++;
  }
  else
    compteChk--;
    
}
//-->
</script>
 
</head>
 
<body>
 
<div>
  <input type="checkbox" onclick="cocher(this)" id="c1" /><label for="c1">choix 1</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c2" /><label for="c2">choix 2</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c3" /><label for="c3">choix 3</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c4" /><label for="c4">choix 4</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c5" /><label for="c5">choix 5</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c6" /><label for="c6">choix 6</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c7" /><label for="c7">choix 7</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c8" /><label for="c8">choix 8</label>
</div>
 
</body>
 
</html>

mais ce script a un bug : si tu coches des cases puis si tu recharges la page, tu pourras cocher plus de 4 cases. Il faudra donc améliorer ce point ;)

[Edit]
Voici un exemple qui corrige le bug ci-dessus :

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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--  
var nbMaxChk = 4;
 
var compteChk;
 
function initVar()
{
  var i, n;
  var tabInput;
  
  compteChk = 0;
  
  tabInput = document.getElementById("conteneurChk").getElementsByTagName("input");
  n = tabInput.length;
  
  for (i=0; i<n; i++)
  {
    if (tabInput[i].type.toLowerCase()=="checkbox" && tabInput[i].checked)
      compteChk++;
  }
}
 
function cocher(objet)
{
  if (objet.checked)
  {
    if (compteChk==nbMaxChk)
      objet.checked = false;
    else
      compteChk++;
  }
  else
    compteChk--;
    
}
//-->
</script>
 
</head>
 
<body onload="initVar()">
 
<div id="conteneurChk">
  <input type="checkbox" onclick="cocher(this)" id="c1" /><label for="c1">choix 1</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c2" /><label for="c2">choix 2</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c3" /><label for="c3">choix 3</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c4" /><label for="c4">choix 4</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c5" /><label for="c5">choix 5</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c6" /><label for="c6">choix 6</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c7" /><label for="c7">choix 7</label><br/>
  <input type="checkbox" onclick="cocher(this)" id="c8" /><label for="c8">choix 8</label>
</div>
 
</body>
 
</html>

J'appelle la fonction initVar() lors du chargement de la page pour compter le nombre de chekbox déjà cochées.

[/edit]

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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--  
var nbMaxChk = 4;
 
var compteChk;
 
function initVar()
{
  var i, n;
  var tabChecks;
 
  compteChk = 0;
 
  tabChecks = document.getElementsByName("check")
  n = tabChecks.length;
 
  for (i=0; i<n; i++)
  {
    tabChecks[i].checked=false
  }
}
 
function cocher(objet)
{
  if (objet.checked)
  {
    if (compteChk==nbMaxChk)
      objet.checked = false;
    else
      compteChk++;
  }
  else
    compteChk--;
 
}
//-->
</script>
 
</head>
 
<body onload="initVar()">
 
<div id="conteneurChk">
  <input type="checkbox" name='check' onclick="cocher(this)" id="c1" /><label for="c1">choix 1</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c2"   /><label for="c2">choix 2</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c3"  /><label for="c3">choix 3</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c4" /><label for="c4">choix 4</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c5"  /><label for="c5">choix 5</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c6"   /><label for="c6">choix 6</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c7"  /><label for="c7">choix 7</label><br/>
  <input type="checkbox" name='check' onclick="cocher(this)" id="c8"   /><label for="c8">choix 8</label>
</div>
 
</body>
 
</html>

04/12/2008, 22h45
rglot

merci. ;)