Discussion :

[jlweb]

Bonjour,

Je n'ai aucune compétence en JS qui est pourtant bien pratique.

Voici ce que je cherche à faire :

J'ai une liste de checkbox décochées par défaut.
Sous la liste de checkbox j'ai un champ de type select qui se rempli en fonction des checkbox que je coche.
Quand je coche une checkbox, le champ select s'incrémente de la valeur venant d'être cochée.
Quand je décoche une checkbox, le champ select se décrémente.

Tout cela sans rechargement de page mais de manière dynamique en JS.

Voici le code :

Code html :

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

1
2
3
4
5
6
7
8
<input type="checkbox" name="categorie1" value="categorie1" /> Catégorie 1
<input type="checkbox" name="categorie2" value="categorie2" /> Catégorie 2
<input type="checkbox" name="categorie3" value="categorie3" /> Catégorie 3
<input type="checkbox" name="categorie4" value="categorie4" /> Catégorie 4
 
<select name="">
<option value="">Choisir</option>
</select>

Comment faire ?
Avez-vous une piste à m'indiquer ?

Merci d'avance

[-Rpass-]

Si tu pars de 0, il faudrait que tu regardes quelques cours sur le Javascript pour avoir quelques notions. Néanmoins je peux te donner quelques pistes :
Dans ton cas il va falloir utiliser des évènements :
-> Un évènement qui se déclenche lorsque que tu cliques surune checkbox
en JQuery :

Code :

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

1
2
$(element).click(function(evt){
});

Ensuite tu vérifies si ta case est cochée :

Code :

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

1
2
3
4
5
6
7
8
$(element).click(function(evt){
if ($(this).prop('checked', true) { // si ta checkbox est checkée
        // tu rajoutes ton champs dans ton select
}
else { // sinon
        // tu l'enlèves
}
});

et en fonction tu rajoutes une balise option dans ton select avec par exemple la méthode append

[jlweb]

Merci Rpass je vais chercher dans cette direction :-)