rendre un champs hidden

**kensem** · 14/06/2011, 20h13

Bonjour,

je veux en cochant un checkbox rendre un champs visible, en le décochant le rendre hidden. Voici mon code mais ça marche pas

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
<html>
<head>
<title>test</title>
<script language="JavaScript">
function masque() {
 
 
	if (document.getElementById("chkb_10").checked==true)
		alert ('ouiiii');
	    document.form.getElementById("text").style.visibility='visible';
 
}
}
</script>
</head>
 
<body>
<form name="form" method="post" action="">
 
Exemples de masquage :
 
<input type="checkbox" id="chkb_10" onClick="masque()">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="texte" style='visibility:hidden'>
</form>
</body>
</html>

**NoSmoking** · 14/06/2011, 20h47

Bonjour,
on peut noter des erreurs de le peu de javascript que tu as écrit,
- une } de trop ou une en moins (!) sur la condition if
- le masquage n'est pas pris en compte et est en fait l'inverse
- la référence à document.form est également erronée, tu peux accéder directement à l'objet grâce à la méthode getElementById mais de document...

cela devrait donner

Code :

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

1
2
3
4
5
6
7
8
function masque() {
  if (document.getElementById("chkb_10").checked==true){
    document.getElementById("text").style.visibility='visible';
  }
  else{
    document.getElementById("text").style.visibility='hidden';
  }
}

ou encore en version abrégée, ou presque

Code :

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

1
2
3
4
5
function masque(){
  var oCheck = document.getElementById("chkb_10");
  var oInput = document.getElementById("texte");
  oInput.style.visibility = oCheck.checked ? 'visible' : 'hidden';
}

**Bovino** · 14/06/2011, 20h49

Déjà, il manque une accolade ouvrante après le if.
Ensuite, dans la mesure où un id doit être unique dans la page, getElementById ne s'applique qu'à l'objet document.
Enfin,

Code html :

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

<input type="text" id="texte" style='visibility:hidden'>

Code :

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

document.form.getElementById("text")

étonnamment, JavaScript ne connait pas les instructions du type "ressemble à", il faut donc passer à getElementById l'identifiant exact recherché

Bref

Code html :

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
<html>
<head>
<title>test</title>
<script language="JavaScript">
function masque() {
 
 
	if (document.getElementById("chkb_10").checked==true){
		alert ('ouiiii');
	    document.getElementById("texte").style.visibility='visible';
 
}
}
</script>
</head>
 
<body>
<form name="form" method="post" action="">
 
Exemples de masquage :
 
<input type="checkbox" id="chkb_10" onClick="masque()">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="texte" style='visibility:hidden'>
</form>
</body>
</html>

fonctionne très bien...

**kensem** · 14/06/2011, 21h55

Merci pour vous

rendre un champs hidden

JavaScript

Discussions similaires

Partager

Partager