Principe des boutons radios sur les checkbox

**misterphil** · 08/10/2008, 13h48

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

**SpaceFrog** · 08/10/2008, 14h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Auteur** · 08/10/2008, 14h11

bonjour,

voilà un exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

**misterphil** · 08/10/2008, 15h04

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