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.

Javascript et checkbox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager