Principe des boutons radios sur les checkbox

Version imprimable

08/10/2008, 13h48
misterphil

Principe des boutons radios sur les checkbox

Bonjour

Je n'arrive pas à trouver un moyen simple d'imiter le principe des "radios", c'est à dire "1 seul choix possible", sur un ensemble de "checkbox". Sachant, ce qui me complique la tâche en fait, que dans la même page, j'ai 3 ensembles distincts de checkbox.

Vous allez me dire, pourquoi ne pas jouer avec les "radios" ? Parce que a priori, les choix multiples devraient à terme être possibles pour l'un ou l'autre de ces ensembles et donc je voudrais juste avoir à supprimer le JS le jour où on donne la possibilité des choix multiples.

Je me demandais s'il n'y avait pas un moyen de jongler avec le tag label qui distinguerait les ensembles de "radios", mais je ne trouve pas de code allant en ce sens... :(

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'>
function single(Obj){
var Groupe=document.getElementsByName(Obj.name);
var i=0;
while (Groupe[i]){if(Groupe[i]!=Obj){Groupe[i].checked=false;}
          i++;       }
}
</script>
 
</head>
 
<body>
<input type='checkbox' name="lot1[]" id='chk0_0' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot1[]" id='chk0_1' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot1[]" id='chk0_2' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot1[]" id='chk0_3' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot1[]" id='chk0_4' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot1[]" id='chk0_5' onmouseup="single(this)"/><br />
<br />
 
<input type='checkbox' name="lot2[]" id='chk1_0' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot2[]" id='chk1_1' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot2[]" id='chk1_2' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot2[]" id='chk1_3' onmouseup="single(this)"/><br />
<input type='checkbox' name="lot2[]" id='chk1_4' onmouseup="single(this)"/><br />
 
</body>

bonjour,

voilà un exemple :

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
 
<!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">
<!--
function cocherChk(chk)
{
  var groupe = chk.name.toLowerCase();
  var i;
  var tabChk;
  
  tabChk = document.getElementsByTagName("input"); // on prend tous les input
  for (i=0; i<tabChk.length; i++)
  {
    if (tabChk[i].type.toLowerCase()=="checkbox") // si c'est un checkbox
    {
      if (tabChk[i].name.toLowerCase() == groupe) // si le checkbox i appartient au même groupe que la case cochée
      {
        tabChk[i].checked = false; // on décoche tout
      }
    }
  }
  
  
  chk.checked = true; // on coche la case choisie
  
}
//-->
</script>
 
</head>
 
<body>
 
<div>
 
<h3>Groupe 1</h3>
<input type="checkbox" name="groupe1" onclick="cocherChk(this)" />choix 1
<input type="checkbox" name="groupe1" onclick="cocherChk(this)" />choix 2
<input type="checkbox" name="groupe1" onclick="cocherChk(this)" />choix 3
<input type="checkbox" name="groupe1" onclick="cocherChk(this)" />choix 4
<input type="checkbox" name="groupe1" onclick="cocherChk(this)" />choix 5
<br/><br/><br/>
 
<h3>Groupe 2</h3>
<input type="checkbox" name="groupe2" onclick="cocherChk(this)" />choix 1
<input type="checkbox" name="groupe2" onclick="cocherChk(this)" />choix 2
<input type="checkbox" name="groupe2" onclick="cocherChk(this)" />choix 3
</div>
 
</body>
 
</html>

le code n'est pas vraiment optimisé, mais ça marche.

Une fois une case cochée, on ne peut plus la décocher (même principe que les boutons radio).

[edit]
SpaceFrog utilise le getElementsByName moi je prends getElementsByTagName.
[/edit]

08/10/2008, 15h04
misterphil

Bon le gagnant est... SpaceFrog. Mais je n'ai testé que celui-là car il semblait plus proche de mon code actuel, donc le second code aurait sans doute fonctionné également.

J'avais fait un code qui marchait sous IE (en dépit d'un message d'erreur !), mais absolument pas sous Firefox. Pffft, bon merci à vous deux :)
08/10/2008, 16h29
SpaceFrog

enfait les [] du name sont en previson des choix multiples ...
08/10/2008, 16h34
misterphil

Oui et ca me va très bien ;) car effectivement j'avais déjà les crochets pour gérer cette sélection multiple pour un traitement en PHP, donc cela m'arrange bien de les garder...