Javascript et checkbox

**Kapov** · 09/02/2012, 16h53

Bonjour a tous et a toutes
J'ai un petit soucis de script je vous explique: j'ai un tableau sous cette forme

je veut d�velopper un script qui va remplir les cases (par ligne ou par colonne) par un texte pr�d�fini dans ce script lorsque la box est d�coch�e ou remettre le texte d'origine lorsque la box est check�.

mon code HTML/PHP:

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
75
76
77
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RAT</title>
 
<script>
    function rat1deco()
	{
      if (getElementById('C1').value == 1 )
	  {
         value="/";
      }
    }
  </script>
</head>
 
<body>
<form action="" method="POST">
<table width="805" height="200" border="1">
  <tr>
    <th width="100" height="28" scope="col">&nbsp;</th>
    <th width="106" scope="col">RAT1 <input type="checkbox" name="C1"  id="C1" checked> </th>
    <th width="106" scope="col">RAT2 <input type="checkbox" name="C2"  id="C2" checked></th>
    <th width="106" scope="col">RAT3 <input type="checkbox" name="C3"  id="C3" checked></th>
    <th width="106" scope="col">RAT4 <input type="checkbox" name="C4"  id="C4" checked></th>
    <th width="106" scope="col">RAT5 <input type="checkbox" name="C5"  id="C5" checked></th>
    <th width="106" scope="col">RAT6 <input type="checkbox" name="C6"  id="C6" checked></th>
    <th width="106" scope="col">RAT7 <input type="checkbox" name="C7"  id="C7" checked></th>
    <th width="106" scope="col">RAT8 <input type="checkbox" name="C8"  id="C8" checked></th>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">tete<input type="checkbox" name="T1" value="ON" id="T1" checked></th>
    <td><label for="tempTete1"></label>
        <input name="tempTete1" type="text" id="tempTete1" size="17" onclick='rat1deco();' /></td>
    <td><input name="tempTete2" type="text" id="tempTete2" size="17" /></td>
    <td><input name="tempTete3" type="text" id="tempTete3" size="17" /></td>
    <td><input name="tempTete4" type="text" id="tempTete4" size="17" /></td>
    <td><input name="tempTete5" type="text" id="tempTete5" size="17" /></td>
    <td><input name="tempTete6" type="text" id="tempTete6" size="17" /></td>
    <td><input name="tempTete7" type="text" id="tempTete7" size="17" /></td>
    <td><input name="tempTete8" type="text" id="tempTete8" size="17" /></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">corps<input type="checkbox" name="T2" value="ON" id="T2" checked></th>
    <td><input name="tempcorps1" type="text" id="tempcorps1" size="17 onclick='rat1deco();' /></td>
    <td><input name="tempcorps2" type="text" id="tempcorps2" size="17" /></td>
    <td><input name="tempcorps3" type="text" id="tempcorps3" size="17" /></td>
    <td><input name="tempcorps4" type="text" id="tempcorps4" size="17" /></td>
    <td><input name="tempcorps5" type="text" id="tempcorps5" size="17" /></td>
    <td><input name="tempcorps6" type="text" id="tempcorps6" size="17" /></td>
    <td><input name="tempcorps7" type="text" id="tempcorps7" size="17" /></td>
    <td><input name="tempcorps8" type="text" id="tempcorps8" size="17" /></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">queu<input type="checkbox" name="T3" value="ON" id="T3" checked></th>
    <td><input name="tempqueu1" type="text" id="tempqueu1" size="17" onclick='rat1deco();' /></td>
    <td><input name="tempqueu2" type="text" id="tempqueu2" size="17" /></td>
    <td><input name="tempqueu3" type="text" id="tempqueu3" size="17" /></td>
    <td><input name="tempqueu4" type="text" id="tempqueu4" size="17" /></td>
    <td><input name="tempqueu5" type="text" id="tempqueu5" size="17" /></td>
    <td><input name="tempqueu6" type="text" id="tempqueu6" size="17" /></td>
    <td><input name="tempqueu7" type="text" id="tempqueu7" size="17" /></td>
    <td><input name="tempqueu8" type="text" id="tempqueu8" size="17" /></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">poids<input type="checkbox" name="T4" value="ON" id="T4" checked></th>
    <td><input name="poid1" type="text" id="poid1" size="17" onclick='rat1deco();' /></td>
    <td><input name="poid2" type="text" id="poid2" size="17" /></td>
    <td><input name="poid3" type="text" id="poid3" size="17" /></td>
    <td><input name="poid4" type="text" id="poid4" size="17" /></td>
    <td><input name="poid5" type="text" id="poid5" size="17" /></td>
    <td><input name="poid6" type="text" id="poid6" size="17" /></td>
    <td><input name="poid7" type="text" id="poid7" size="17" /></td>
    <td><input name="poid8" type="text" id="poid8" size="17" /></td>
  </tr>
</table>
</form>
</body>
</html>

Mon script remplace par un " / " la valeur qui �tait dans mes zones de texte. je pense que le soucis du script vien de cette ligne:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (getElementById('C1').value == 1 )

Pouvez m'�clairer ?

**Bovino** · 09/02/2012, 17h01

Envoy� par Kapov

je pense que le soucis du script vien de cette ligne:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (getElementById('C1').value == 1 )

Oui, c'est bien �a !

D'une part, getElementById() est une m�thode de l'objet document, or si tu ne le pr�cises pas, c'est l'objet window qui est prit par d�faut.
D'autre part, ton input n'a pas de value et de toute fa�on, ce que tu souhaites tester n'est pas sa propri�t� value mais checked...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (document.getElementById('C1').checked)

**Kapov** · 09/02/2012, 17h18

Merci pour votre lecture et votre correction rapide !!! J'ai modifi� ma page mais pourtant l'affichage "forc�" ne s'effectue toujours pas...
subsisterait t'il d'autres erreurs que je n'aurais pas vu ?

**Bovino** · 09/02/2012, 17h26

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
      if (getElementById('C1').value == 1 )
	  {
         value="/";
      }

Ben l�, il te manque quand m�me certaines choses importantes dans ta condition !

value, c'est suppos� �tre quoi ? Une variable ?
Ensuite, tu veux afficher quoi et o� ?

**Kapov** · 09/02/2012, 17h38

j'ai corrig� cella:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
 function rat1deco()
	{
      if (document.getElementById('C1').checked)
	  {
         value="/";
      }
    }

va remplir le champs

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<input name="tempTete1" type="text" id="tempTete1" size="17" onClick='rat1deco();' />

lorsque la box "C1" sera d�coch�e

**Bovino** · 09/02/2012, 17h47

Envoy� par Kapov

va remplir le champs

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<input name="tempTete1" type="text" id="tempTete1" size="17" onClick='rat1deco();' />

lorsque la box "C1" sera d�coch�e

Ben non, parce que la propri�t� value s'applique � un objet, pas dans le vide... Il faut que tu pr�cises � quel objet l'affectation s'applique.
D'autre part, la fonction sera lanc�e lorsque tu cliqueras sur le champ en question, pas lorsque tu cocheras ou d�cocheras la checkbox.

**Kapov** · 10/02/2012, 08h36

finalement j'ai tout chang� et int�gr� les affichages par ma BDD mon code donne:

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<?php
include ("BDSQL.class.php");
$objSQL=new BDSQL();
 
//Connexion au serveur
  $res=$objSQL->connexion("localhost","root","");
   if($res!=0)
	 {
	  echo $objSQL->erreur();
	 }
 
 
// Connexion a la base de données
mysql_select_db("rat") or die("erreur de connexion a la base de donnees");
 
  $query = "SELECT * FROM rat1";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat1 = $donnee[0];
	      $tempcorpsrat1 = $donnee[1];
	      $tempqueurat1 = $donnee[2];
	      $poidsrat1 = $donnee[3];
	    }
  $query = "SELECT * FROM rat2";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat2 = $donnee[0];
	      $tempcorpsrat2 = $donnee[1];
	      $tempqueurat2 = $donnee[2];
	      $poidsrat2 = $donnee[3];
	    }
  $query = "SELECT * FROM rat3";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat3 = $donnee[0];
	      $tempcorpsrat3 = $donnee[1];
	      $tempqueurat3 = $donnee[2];
	      $poidsrat3 = $donnee[3];
	    }
  $query = "SELECT * FROM rat4";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat4 = $donnee[0];
	      $tempcorpsrat4 = $donnee[1];
	      $tempqueurat4 = $donnee[2];
	      $poidsrat4 = $donnee[3];
	    }
  $query = "SELECT * FROM rat5";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat5 = $donnee[0];
	      $tempcorpsrat5 = $donnee[1];
	      $tempqueurat5 = $donnee[2];
	      $poidsrat5 = $donnee[3];
	    }
  $query = "SELECT * FROM rat6";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat6 = $donnee[0];
	      $tempcorpsrat6 = $donnee[1];
	      $tempqueurat6 = $donnee[2];
	      $poidsrat6 = $donnee[3];
	    }
  $query = "SELECT * FROM rat7";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat7 = $donnee[0];
	      $tempcorpsrat7 = $donnee[1];
	      $tempqueurat7 = $donnee[2];
	      $poidsrat7 = $donnee[3];
	    }
  $query = "SELECT * FROM rat8";
  $result = mysql_query($query);
      while($donnee = mysql_fetch_row($result))
        {
	      $tempteterat8 = $donnee[0];
	      $tempcorpsrat8 = $donnee[1];
	      $tempqueurat8 = $donnee[2];
	      $poidsrat8 = $donnee[3];
	    }
  mysql_close();	
?>
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Refresh" CONTENT="60; URL=tableaux.php">
<title>RAT</title>
</head>
 
<body>
<form action="" method="POST">
<table width="805" height="200" border="1">
  <tr>
    <th width="100" height="28" scope="col">&nbsp;</th>
    <th width="106" scope="col">RAT1 <input type="checkbox" name="C1"  id="C1" checked></th>
    <th width="106" scope="col">RAT2 <input type="checkbox" name="C2"  id="C2" checked></th>
    <th width="106" scope="col">RAT3 <input type="checkbox" name="C3"  id="C3" checked></th>
    <th width="106" scope="col">RAT4 <input type="checkbox" name="C4"  id="C4" checked></th>
    <th width="106" scope="col">RAT5 <input type="checkbox" name="C5"  id="C5" checked></th>
    <th width="106" scope="col">RAT6 <input type="checkbox" name="C6"  id="C6" checked></th>
    <th width="106" scope="col">RAT7 <input type="checkbox" name="C7"  id="C7" checked></th>
    <th width="106" scope="col">RAT8 <input type="checkbox" name="C8"  id="C8" checked></th>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">tete<input type="checkbox" name="T1" value="ON" id="T1" checked></th>
    <td><div align="center"><?php echo $tempteterat1 ?></div></td>
    <td><div align="center"><?php echo $tempteterat2 ?></div></td>
    <td><div align="center"><?php echo $tempteterat3 ?></div></td>
    <td><div align="center"><?php echo $tempteterat4 ?></div></td>
    <td><div align="center"><?php echo $tempteterat5 ?></div></td>
    <td><div align="center"><?php echo $tempteterat6 ?></div></td>
    <td><div align="center"><?php echo $tempteterat7 ?></div></td>
    <td><div align="center"><?php echo $tempteterat8 ?></div></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">corps<input type="checkbox" name="T2" value="ON" id="T2" checked></th>
    <td><div align="center"><?php echo $tempcorpsrat1 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat2 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat3 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat4 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat5 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat6 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat7 ?></div></td>
    <td><div align="center"><?php echo $tempcorpsrat8 ?></div></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">queu<input type="checkbox" name="T3" value="ON" id="T3" checked></th>
    <td><div align="center"><?php echo $tempqueurat1 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat2 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat3 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat4 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat5 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat6 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat7 ?></div></td>
    <td><div align="center"><?php echo $tempqueurat8 ?></div></td>
  </tr>
  <tr>
    <th height="30" width="100" scope="row">poids<input type="checkbox" name="T4" value="ON" id="T4" checked></th>
    <td><div align="center"><?php echo $poidsrat1 ?></div></td>
    <td><div align="center"><?php echo $poidsrat2 ?></div></td>
    <td><div align="center"><?php echo $poidsrat3 ?></div></td>
    <td><div align="center"><?php echo $poidsrat4 ?></div></td>
    <td><div align="center"><?php echo $poidsrat5 ?></div></td>
    <td><div align="center"><?php echo $poidsrat6 ?></div></td>
    <td><div align="center"><?php echo $poidsrat7 ?></div></td>
    <td><div align="center"><?php echo $poidsrat8 ?></div></td>
  </tr>
</table>
</form>
</body>
</html>

est-ce que j'ai toujours moyen de faire ce que je voulais je que doit ajouter une condition a chaque ligne ?
En gros si box checked affiche echo $variabe else box unchecked echo ' / '
sa peut fonctionner comme cela ?
enfin et il y aurais une double condition avec la colonne et la ligne

Javascript et checkbox

JavaScript

Discussions similaires

Partager

Partager