Discussion :

[newty]

Bonjour,

Cela fait 1 journée que je tente d'afficher / cacher des champs avec jquery mais j'avoue galérer bien comme il faut vu que je n'ai pas du tout d'expérience dans ce domaine...

J'ai en fait 2 radio button oui et non puis des champs input text par la suite. Par défaut, j'aimerai que ces champs input text soit cachés.

Puis, lorsque je sélectionne le radiobutton oui, le premier champs s'affiche.
Si je sélectionne le radiobutton non, le premier champs se cache et le second s'affiche. Vous voyez ?

Code :

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

1
2
3
4
5
<input type="radio" name="enfants_charge" id="enfants_charge_oui" class="validate[required] radio"><label for="enfants_charge_oui">Oui</label>
<input type="radio" name="enfants_charge" id="enfants_charge_non" class="validate[required] radio"><label for="enfants_charge_non">Non</label></td>
 
<input type="text" name="departement"  id="departement" class="validate[required,custom[onlyNumber],length[0,2]] text-input" />
<input type="text" name="departement_conjoint"  id="departement_conjoint" class="validate[required,custom[onlyNumber],length[0,2]] text-input" />

J'ai tenté avec :

Code :

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

1
2
3
4
$("input[@name='enfants_charge']").change(function(){
    			if ($("input[@id='enfants_charge_oui']:checked"))
        			$('#departement').hide;
		});

Mais cela ne fonctionne pas malheureusement. Si les pro jquery qui sommeillent en vous pouvaient m'aiguiller

[danielhagnoul]

Bonsoir.

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
/*
 * Si par défaut, à l'ouverture de la page, le
 * bouton non est sélectionné on cache le premier
 * input et on montre le second.
 *
 * Si par défaut, à l'ouverture de la page, le
 * bouton oui est sélectionné on montre le premier
 * input et on cache le second.
 *
 * Ici c'est le premier cas :
 */ 
$("#departement").hide();
$("#departement_conjoint").show();
 
// on alterne grâce à toggle voir http://api.jquery.com/toggle/
$("input[name='enfants_charge']").change(function(){
	$("#departement").toggle();
	$("#departement_conjoint").toggle();
});

[artotal]

une autre façon plus élégante est d'utilisé la méthode toggle, qui fonctionne comme hover, avec deux arguments de typse fonctions. Et escamote les éléments au premier click.

[newty]

Merci à vous ça fonctionne, c'est super