Tableau, CheckBox et couleur

**DaisyVIP** · 11/01/2008, 10h50

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>

**elkamy** · 11/01/2008, 11h04

Salut

une petite erreur,tu as mis :

Code :

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

1
2
 
id="c1"

au lieu de

Code :

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

id=="c1"

**DaisyVIP** · 11/01/2008, 11h21

Merci infiniment!!!

Mais dis moi, est ce que tu sais par hasard comment pourrais-je faire pour faire en sorte que lorsque je clique sur une autre checkbox, celle qui était sélectionnée se désélectionne?
Merci beaucoup beaucoup beaucoup!!!
T'es un AS!

**elkamy** · 11/01/2008, 11h28

Cela revient à utiliser des radioButton ...

Mais si tu veux vraiment garder tes checkbox, faut un petit javascript

**DaisyVIP** · 11/01/2008, 11h36

Ah ok.
Mais je préfère avoir des checkboxes. Je pense qu'ils sont + significatifs.
Quel javascript faudrait-il faire?
Décidement je suis vraiment nulle! MDR!
Merci beaucoup de ton aide elkamy!!! T'es trop fort!!!!

**elkamy** · 11/01/2008, 11h40

J'ai fais ca je ne sais pas,ce n'est peut etre pas optimisé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
   function ResetCheckBox(idTable)
   {
     inputs=document.getElementById(idTable).getElementsByTagName('input');
      for (var i =0;i<inputs.length;i++)
      {
        if (inputs[i].type == 'checkbox')
        {
          inputs[i].checked=false;
        }
      }
  }

donc sur ta table tu mets un id, et sur tes cellules tu mets :

Code :

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

onmousedown="javascript: ResetCheckBox('lIdDeTaTable');"

par exemple

Code :

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

1
2
 
<td id="c1" onmousedown="javascript: ResetCheckBox('maTable');" onclick="Couleur(this.id)" width="15" >

dis moi si cela fonctionne..

Par contre sur ton code , je ne sais pas si cela est voulu, si tu click sur ta cellule mais a coté de ta checkbox, elle se colorie...

Tableau, CheckBox et couleur

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager