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

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

Merci infiniment!!!
ça marche nikel du feu de dieu!!!! MDR!
T'es vraiment trop fort!!!
Par contre pour le couleur, j'ai remarqué oui, et ce n'est pas voulu du tout. Je préfèrerais que la case ne se colorie que si on clique sur la checkbox et idem quand on décoche la checkbox (la case redevient à son état initial).
Tu sais comment on peut changer ça?
En tout cas merci infiniment!!!!
T'es THE BOSS!

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

Donc j'ai modifié un peu ton code:

La fonction ResetCheckBox:

Code :

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

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

Ta fonction Couleur :

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
function Couleur (cellId,ckId) 
{ 
 
/* Passe toutes les checkBox en checked=false*/
ResetCheckBox('maTable',ckId)
 
/* --- 
- 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 ( cellId=="c1")
{
    this.couleur = '#33FF00';
    this.id=cellId;
}
 
if ( cellId=="c2")
{
    this.couleur = '#FF9933';
    this.id=cellId;
}
 
if ( cellId=="c3")
{
    this.couleur = '#FF0000';
    this.id=cellId;
}
 
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 = ''; 
} 
} 
}

Et ta table HTML :

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
      <table id="maTable" width="200" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td id="c1" width="15">
            <asp:CheckBox onclick="Couleur('c1',this.id)" ID="CheckBox1" runat="server" />
          </td>
          <td id="c2" width="15">
            <asp:CheckBox onclick="Couleur('c2',this.id)" ID="CheckBox2" runat="server" />
          </td>
          <td id="c3" width="15">
            <asp:CheckBox onclick="Couleur('c3',this.id)" 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>

Voila ca doit marcher ...

**DaisyVIP** · 11/01/2008, 12h35

Je pense que l'idée est excellente mais il y a des erreurs.
Déjà le Onclick dans les balises asp ne marche qu'avec des messages d'erreurs.
Et quand je le mets à l'extérieur des balises asp, ça ne marche pas non plus.
Pourquoi il m'affiche une fenêtre d'erreur avec écrit "CheckBox1" puis "CheckBox2" et enfin "CheckBox3"?
Merci de ton aide.

**SaumonAgile** · 11/01/2008, 13h42

J'ai l'impression que tu ne cherches pas trop à comprendre ce qui est contenu dans le script... Tu devrais essayer de t'y intéresser sinon tu ne progresseras pas.

Les boites de dialogue viennent de cette instruction : alert(inputs[i].id);
La fonction alert en javascript affiche une boite de dialogue.