Apparaître un input lors du clik sur autre

Résolu
vanesa -  
 vanesa -
Bonjour,

par exemple j'ai ce code

	  <ul id="global-annonce-type">
	  <li><input type="radio" id="annonce" name="nouveau-type" /><label for="annonce"><span></span>annonce</label></li>
	  <li><input type="radio" id="topic" name="nouveau-type" /><label for="topic"><span></span>topic</label></li>
	  
	  <li><input type="radio" id="topic" name="nouveau-type" /><label for="autre"><span></span>autre</label></li>
	  </ul>



j'aimerais lors du click sur le button type radio autre , il me feras apparaître un input

mais si je click sur input type annonce ou topic , l'input sera cacher

comment, je dois faire apparaître un input lors du click uniquement sur autre


merci





Configuration: Windows / Chrome 73.0.3683.103
A voir également:
  • E fichier contient un tableau présentant un extrait des livres les plus prêtés à paris en 2016. filtrez le tableau pour ne faire apparaître que les bandes dessinées ado. puis filtrez le tableau pour ne faire apparaître que celles dont l'auteur est zep. quel est le titre de la bande dessinée ado de zep qui a été la plus prêtée d'après ce tableau ?
  • Tableau word - Guide
  • Tableau ascii - Guide
  • Trier un tableau excel - Guide
  • Tableau croisé dynamique - Guide
  • Imprimer un tableau excel - Guide

1 réponse

tpez Messages postés 331 Date d'inscription   Statut Membre Dernière intervention   39
 
Juste pour savoir intègres-tu du Jquery dans tes pages web ?
0
vanesa
 
oui

c'est juste pour le formulaire de contact

je vais surement mettre 3 choix avec type radio
et un 4 ème type de radio autre et là il pourront mettre dans l'inpu leur objet ;)
0
tpez Messages postés 331 Date d'inscription   Statut Membre Dernière intervention   39
 
Dans ce cas, voici le code (il se peut que tu ais besoin de faire quelques modifications pour coller à ce que tu veux faire) /!\Fais attention tu as oublié de changer l'id de ta troisième input (tu as deux fois l'id "autre" :
$('#autre').on('click', function(){
    if( $(this).is(':checked') ){
        $(this).after("<input type='text' class='nouvel-input-genere' name='nouvel-input-genere'> ");
    }else{
        $('.nouvel-input-genere').remove();
    }
});


Si ça ne fonctionne pas (parceque je n'ai pas vérifié) ou que tu à un autre problème, dis le moi et je reviendrai t'aider en ayant testé au préalable ; ) .
0
vanesa
 
merci, je vais tester des que j'aurais refait la page

je te tiendrais au courant
0
vanesa
 
je viens tester

il fonctionne bien , il m'affiche l'input lors du 1 er click.

mais, il faudrait évité de mettre input à chaque fois qu'on click

et le mot autre il faut laisser à côté du input type radio car là il se met à droite de l'input

je ne sais pas si tu peux cliquer sur le lien afin de tester

https://jsfiddle.net/jdhc3auf/

je t'en remerci
0
tpez Messages postés 331 Date d'inscription   Statut Membre Dernière intervention   39
 
Je me suis permis de modifier un peu mon précédent code pour gérer correctement l'input, ainsi que ton code html :
LE HTML :
<ul id="global-annonce-type">
   <li><input type="radio" id="annonce" name="nouveau-type" /><label for="annonce"><span></span>annonce</label></li>
   <li><input type="radio" id="topic" name="nouveau-type" /><label for="topic"><span></span>topic</label></li>
   
   <li><input type="radio" id="autre" name="nouveau-type" /><label for="autre"><span></span>autre</label></li>
    
    <li><input type='text' class='nouvel-input-genere' name='nouvel-input-genere'></li>
   </ul>


Le JS
$('input[name=nouveau-type]').on('click', function(e){
    if ($(e.target).is("#autre")){
     $('.nouvel-input-genere').fadeIn();
    }else{
     $('.nouvel-input-genere').fadeOut();
    }
});
Ma modification permet de gérer la disparition si l'on reclic sur une autre input

LE CSS :
.nouvel-input-genere {
  display: none;
}


Je souhaite également te préciser que tu peux faire exactement la même chose sans JS juste avec du CSS, personnellement je privilégierai la méthode CSS cela permettrait que les navigateurs n'exécutant pas le JS ait quand même le même résultat. Si tu veux que je te montre comment faire, dis le moi et je te montrerai.
0