rendre un champs hidden [Résolu]

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

14/06/2011, 21h55	#4
kensem Membre du Club Étudiant Inscription : septembre 2010 Messages : 213 Détails du profil Informations personnelles : Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : septembre 2010 Messages : 213 Points : 52 Points : 52	Merci pour vous
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email