Tableau, CheckBox et couleur

Version imprimable

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:

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>

11/01/2008, 11h04
elkamy
Salut ;)

une petite erreur,tu as mis :
Code:

1 2 id="c1"
au lieu de

Code:

id=="c1"
11/01/2008, 11h21
DaisyVIP

Merci infiniment!!! :king:
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! ;)
:king:
11/01/2008, 11h28
elkamy

Cela revient à utiliser des radioButton ... ;)

Mais si tu veux vraiment garder tes checkbox, faut un petit javascript
11/01/2008, 11h36
DaisyVIP

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!!!!:king:

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

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:

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

par exemple
Code:

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

11/01/2008, 11h51
DaisyVIP

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! :king:

Donc j'ai modifié un peu ton code:

La fonction ResetCheckBox:

Code:

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:

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:

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

11/01/2008, 12h35
DaisyVIP

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.
11/01/2008, 13h42
SaumonAgile

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.
11/01/2008, 13h54
DaisyVIP

Ah oui, désolée, et merci bien pour les explications.:king:
:salut:
11/01/2008, 14h00
elkamy

Oups , oui désolé , c'était pour moi, j'ai oublié de les enlevés :oops:

Encore désolé...
11/01/2008, 15h56
DaisyVIP

Merci beaucoup elkamy. T'es vraiment génial!!!:king:
C'est un plaisir d'être aidé par toi.:king:
Merci encore et encore.:king:
Peut-être à bientôt.:yaisse2: