11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/Masquer un <span> avec une checkbox

Bonjour à tous,
je suis entrain de faire un formulaire dans lequel, je souhaiterai afficher ou masquer une zone du formulaire comprise entre des balises <span> suivant si l'utilisateur coche ou non une checkbox.
J'ai déjà bricolé un code, mais cela ne fonctionne pas, donc je souhaitais avoir votre avis là dessus. Voici les parties du code concerné :

Dans la page HTML

<form action="valid.php" method="post" name="config">
// ...
// La checkbox en question
<h2><label for="DEFT_objlist">Choix de l'objet par liste d&eacute;roulante </label><input name="DEFT_objlist" id="DEFT_objlist" style="margin-top: 0;" type="checkbox" onClick="ChangeStatut(this.form);" value="1" /></h2>
// ...
<span id="DISPLAY_obj" style="display: inherit;">
	<h1>Configuration de la liste des objets</h1>
		<h2><label for="OBJ_int1">Objet de message 1</label><input name="OBJ_int1" type="text" class="input_text capitalize" id="OBJ_int1" /></h2>
</span>
// ...
</form>


Voici ensuite la fonction javascript "ChangeStatus"

function ChangeStatut(formulaire) {
if(formulaire.DEFT_objlist.checked == true) {
formulaire.DISPLAY_obj.style.display = 'inline';
} else {
formulaire.DISPLAY_obj.style.display = 'none';
}
}
Avec jQuery, tu peux partir sur quelque chose dans le genre:

<script>
  $(function(){
    var mySpan = $("#bar").hide();
    $("#foo").click(function(){
      if($(this).is(":checked"))
        mySpan.show();
      else
        mySpan.hide();
    });
  });
</script>

<form>
  <input type=checkbox id=foo>
  <span id=bar>Some stuff to toggle</span>
</form>
Bonjour,

function ChangeStatut(formulaire) {

				
					if (formulaire.DEFT_objlist.checked == 1) {
						document.getElementById("DISPLAY_obj").style.display = "block";
					}
					else {
						document.getElementById("DISPLAY_obj").style.display = "none";
					}	
					


			}



<form action="valid.php" method="post" name="config">
<h2>
	<label for="DEFT_objlist">Choix de l'objet par liste déroulante </label>
	<input name="DEFT_objlist" id="DEFT_objlist" style="margin-top: 0;" type="checkbox" onClick="ChangeStatut(this.form);" />
</h2>

<div id="DISPLAY_obj">

	<h1>Configuration de la liste des objets</h1>

		<h2>
			<label for="OBJ_int1">Objet de message 1</label>
			<input name="OBJ_int1" type="text" class="input_text capitalize" id="OBJ_int1" />
		</h2>

</div>


J'ai changé le span en div , car span est un element inline qui ne doit pas contenir d'element en block (ici les titres H1 H2).

Tu peux mettre sur DISPLAY_obj un display:none ; mais tu perds l'accessibilité pour les personnes n'ayant pas javascript. Donc à voir soit le cacher au chargement de la page , soit perdre l'accessibilité
Sujet clos
Aller à