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