Bonjour,
j'ai un petit soucis avec mon code, il y a certainement une erreur, mais laquelle?
Voici ce que je veux faire :
J'ai 3 CheckBox, ce que je veux, c'est que lorsque je clique sur la 1ère, la case se colorie en vert, quand je clique sur la 2nde : la case se colorie en orange, et enfin quand je clique sur la 3ème : la case se colorie en rouge.

Je ne parviens pas à ce résultat final.
Ce que j'obtiens est la coloration de la dernière case (en rouge), mais lorsque je clique sur les 2 autres checkboxes (vert et orange), la 3ème se colorie en rouge, mais pas les autres... étrange non?

Je vous donne mon code, si quelqu'un peut m'aider, ça serait super sympa de sa part. Merci d'avance.

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
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
72
73
74
 
<head runat="server">
 
    <title>Test tableau évaluation</title>
 
    <script type="text/javascript"> 
function Couleur (id) 
{ 
 
/* --- 
- rien, on clic -> on surligne 
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e 
- case déjà surlignée, clic sur même -> on enleve la 1ere */ 
 
// ici on configure la couleur au clic: 
if ( id="c1")
{
    this.couleur = '#33FF00';
    this.id=id;
}
 
if ( id="c2")
{
    this.couleur = '#FF9933';
    this.id=id;
}
 
if ( id="c3")
{
    this.couleur = '#FF0000';
    this.id=id;
}
 
if (typeof this.highlighted=='undefined' || this.highlighted=='') 
{ 
document.getElementById(this.id).style.background = this.couleur; 
this.highlighted=this.id; 
} 
else 
{ 
if (this.id!=this.highlighted) 
{ 
document.getElementById(this.id).style.background = this.couleur; 
document.getElementById(this.highlighted).style.background = 'transparent'; 
this.highlighted = this.id; 
} 
else 
{ 
document.getElementById(this.id).style.background = 'transparent'; 
this.highlighted = ''; 
} 
} 
} 
</script> 
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Bravo tu as réussis!<br />
          <table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr >
       <td id="c1" onclick="Couleur(this.id)" width="15" > <asp:CheckBox ID="CheckBox1" runat="server"/> </td>
       <td id="c2" onclick="Couleur(this.id)" width="15" > <asp:CheckBox ID="CheckBox2" runat="server"/> </td>
       <td id="c3" onclick="Couleur(this.id)" width="15" > <asp:CheckBox ID="CheckBox3" runat="server"/> </td>
 
   <td width="15"></td>
   <td width="15"><a href="Testage.aspx">Là</a></td>
   <td width="15"> </td>
  </tr>
          </table>
    </div>
    </form>
</body>