JQuery - affichage dynamique toggle()
Posté : 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:
Problème: J'aimerais afficher les sous-catégories en fonction des boutons radio qui ne sont pas cochés.
Exemple:
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:
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:
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
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');
});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");
}
Qu'en pensez vous ?
Merci