JQuery - affichage dynamique toggle()

21 avr. 2010, 11:32

Bonjour,

Voici mon problème. J'ai trois boutons radios:
Bouton 1: Voitures
Bouton 2: Nourriture
Bouton 3: Nature

Et j'ai en dessous une liste de cases à cocher (checkbox) qui ce présente de cette forme:

<span class="Voitures">
case 1: BMW
case 2: Fiat
case 3: Renault
</span>

<span class="Nourriture">
case 1: Fromage
case 2: Jambon
</span>

<span class="Nature">
case 1: Arbre
case 2: Herbe
</span>

Ce qui m'affiche donc sans Jquery trois boutons, puis une liste avec les différentes sous-catégories. Jusque là pas de soucis...

Problème: J'aimerais afficher les sous-catégories en fonction des boutons radio qui ne sont pas cochés.

Exemple:

Bouton 1:  Voitures
Bouton 2:  Nourriture checked 
Bouton 3:  Nature

<span class="Voitures">
case 1: BMW
case 2: Fiat
case 3: Renault
</span>

<span class="Nature">
case 1: Arbre
case 2: Herbe
</span>

Pour faire cela j'ai décidé d'utiliser toggle() qui m'a l'air plutôt pratique pour ce genre de choses. J'ai également utilisé la fonction click() qui va permettre de cacher à chaque clic les sous catégories qui ne correspondent pas. Cependant, si un bouton est déjà coché et que je clic dessus, les catégories vont réapparaitre...

Voici mon code:

Code : Tout sélectionner

      $('#voiture').click(
                          function () {      	
                             $(".voiture").toggle('slow');
    	       });
		$('#Nourriture').click(
	  		  function (){
	                    $(".Nourriture").toggle('slow');
	    	});
	  	$('#Nature').click(
	  		  	function (){
	                  	
	                    $(".Nature").toggle('slow');
	    	});

J'ai pensé à utiliser checked pour vérifié si ma case est coché. Le seul problème est que la vérification se fait uniquement au chargement de la page. Et au niveau de la syntaxe je suis un peu perdu

Voici un code d'exemple de l'utilisation de checked:

Code : Tout sélectionner

var id = $("input[@id=Nourriture]:checked").attr('id');
		if(id =="Nourriture" ){
			alert("salut");
		}

Si de base la case est coché sur Nourriture, j'aurais le message au chargement de la page. Mais si je change de bouton et que je reviens dessus ensuite, je n'ai plus d'alerte

Qu'en pensez vous ?

Merci

22 avr. 2010, 10:30

Bonjour,

Au lieu d'utiliser toggle utilise hide ou show selon l'état actuel de la div en question et selon le choix de l'utilisateur.

if($('.voiture').css('display') == 'none') && taConditionQuiFaitQueTuDoisAfficher) 
    $('.voiture).show();

JQuery - affichage dynamique toggle()

Qui est en ligne