jQuery Girl
  1. jQuery Girl
  3. Afficher / masquer un ensemble de champs à l’aide de jquery
Intereting Posts
Changeur de langue jQuery Image d’arrière-plan évolutive CSS ou jQuery avec AUCUN espace blanc lorsque la hauteur d’img est inférieure à la hauteur de la fenêtre Fonction Ajax en local mais pas en ligne Filtrer une liste de sélection via la zone de saisie et jquery Comment faire pour que ce texte jQuery disparaisse? Quelle est la différence entre .closest () et .parents (‘selector’)? un appel ajax entraîne une erreur au lieu d’un succès jQuery: possibilité de menu déroulant Comment résoudre les objects en double dans la page de chargement dynamic en utilisant jQuery? Comment obtenir la valeur de la balise anchor en utilisant jQuery? Cacher A DIV si l’écran est plus étroit que 1024px Format DateTime selon la culture de MVC Faire css nth-child () n’affecte que visible chaîne json de vb.net side à asp.net Charger le contenu du site Web dans un atsortingbut

Afficher / masquer un ensemble de champs à l’aide de jquery

J’ai le code html suivant: – 

   
    Name:  
 Email:  
 Date of birth:  
 
    Name:  
 Email:  
 Date of birth:  
 
    Name:  
 Email:  
 Date of birth:

Mais comment puis-je afficher et masquer un ensemble de champs si l’utilisateur clique sur le bouton “afficher / masquer le formulaire” ET existe-t-il un moyen de modifier le libellé du bouton afin d’afficher ou de masquer en fonction du statut actuel de l’ensemble de champs? BR

Lorsque fieldset est masqué, votre bouton est également masqué. Vous pouvez modifier votre marquage et utiliser la méthode de toggle : 

  
 Name: 
 Email: 
 Date of birth:  
 

 $('.toggle').click(function(){ var $this = $(this); $this.text( $this.text() == 'Show' ? "Hide" : "Show" ) $this.next().toggle() })

Votre code HTML: 

  
  Name: 
 Email: 
 Date of birth:  
 
  
  Name: 
 Email: 
 Date of birth:  
 
  
  Name: 
 Email: 
 Date of birth:

VOTRE CODE jQuery: 

  $(function(){ $('button').click(function(){ if( $(this).html()=='Show/Hide form') $(this).html('Hide'); $(this).nextAll('fieldset:first').toggle(); $(this).html()=='Show'?($(this).html('Hide')):($(this).html('Show')); }); })

Votre JSFIDDLE:

http://jsfiddle.net/bzAkL/