11548 sujets

JavaScript, DOM et API Web HTML5

Cacher et afficher des champs avec Jquery

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 ?

<input type="radio" name="enfants_charge" id="enfants_charge_oui" class="validate Smiley required radio"><label for="enfants_charge_oui">Oui</label>
<input type="radio" name="enfants_charge" id="enfants_charge_non" class="validate Smiley 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 :

$("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 :mrgreen:
Hello,

Déjà, il te fautdrait ajouter des attributs value à tes radio :


<input type="radio" name="enfants_charge" id="enfants_charge_oui" value="oui" class="validate required  radio"><label for="enfants_charge_oui">Oui</label>
<input type="radio" name="enfants_charge" id="enfants_charge_non" value="non" class="validate required radio"><label for="enfants_charge_non">Non</label></td>


Ensuite, ce que je ferai est d'attribuer un event change sur les radio, et en fonction de la value, afficher ou masquer les champs en rapport.

$('input[name=enfants_charge]').change(function() {
	var value = $(this).val(),
		departement = $('#departement'),
		departementConjoint = $('#departement_conjoint');
	if (value=="oui") {
		departement.show();
		departementConjoint.hide();
	} else {
		departement.hide();
		departementConjoint.hide();
	}
});


Le code n'est pas testé, je ne sais jamais trop comment récupérer la valeur d'un radio en jQuery, est-ce que c'est avec val() ou avec .attr('checked')...
Enfin, il te faut masquer tes éléments à la base. Tu peux soit le faire avec du CSS (attention à bien l'appliquer uniquement si js est activé), soit avec la méthode .hide() de jQuery.
Avec les 2 c'est encore mieux.

$("radio[name=monradio]:checked").val()

Avec ce code ca doit passer.

Sinon pour faire plus court et plus propre
$("input[@name='enfants_charge']")

Peut donner 
$("input[name=enfants_charge]")

Car je suis pas sur que la première syntaxe passe correctement

Sinon dernier point, des radios avec des "values" ca serait bcp mieux dans ton cas.
Modifié par kaen25 (03 Aug 2010 - 18:10)
Sujet clos
Aller à