Sélection multiple checkbox avec jQuery

Bonjour la communauté :D

Je tien avant tout vous souhaiter tous mes vœux pour cette nouvelle année :ccool:

Voilà si je viens vers vous aujourd'hui, c'est que j'ai besoin d'un petit coup de main.

J'ai mis au point un petit script qui me met à jour automatiquement le contenu d'une "div" avec la valeur des "checkbox" cochées.

Exemple : checkbox 1 - checkbox - checkbox 3 ...
Quand une checkbox est coché, ma div se met à jour =)
Jusqu'à là, tout va bien

Mon problème est que, quand je décoche une checkbox, bah ma div se met à jour avec "NaN" et moi je veux simplement que ce soit la valeur de la checkbox décochée qui vire de ma div :s

Je m'exprime mal je pense :s Je vous met un exemple de mon code pour y voir plus claire.

Mon code HTML

Code:

---

1 2 3 4 5 6 7 8 9 10

<label for="spoken">Spoken languages</label> <input type="checkbox" name="language" value="English" /> English <input type="checkbox" name="language" value="French" /> French <input type="checkbox" name="language" value="German" /> German <input type="checkbox" name="language" value="Italien" /> Italian <input type="checkbox" name="language" value="Russian" /> Russian <input type="checkbox" name="language" value="Spanish" /> Spanish<br/>   <label for="spokenLng"></label> <div id="spoken"></div><!-- Div a mettre à jour avec les langues parlées -->

---

Mon JS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function(){ var spokenLangs = new Array(); $("input[name='language']").click(function () { if ($(this).is(':checked') == true) { spokenLangs += $(this).val() + ", "; } if ($(this).is(':checked') == false) { removeLang = $(this).val(); spokenLangs = spokenLangs-removeLang; } $("#spoken").html("<font size='2'>"+spokenLangs+"</font>"); }); });

---

Donc comme j'ai dis tout à l'heure, à chaque fois que je coche une case, ma div se met bien à jour avec la valeur de la checkbox (ex: English, German...)

Cependant quand je décoche une case, ça me met "NaN" dans ma div.

Ai-je oubliée quelque chose ? Merci par avance =)

Bonjour,

Citation:

---

spokenLangs = spokenLangs-removeLang;

---

pose toi la question de ce que signifie/représente une soustraction d'une chaine à une autre avec l'opérateur mathématique - (moins)

Salut et bonne année !

Code:

---

spokenLangs = spokenLangs-removeLang;

---

Héhé, bien essayé ! Mais les chaînes, ça ne fonctionne pas comme ça. Quand tu utilises l'opérateur moins (-), JavaScript fait ce qu'il peut pour convertir les termes en nombres. Et comme il n'y arrive pas, il finit par dire NaN ce qui signifie Not a Number.

Il faut que tu découpes spokenLangs en trois parties : la partie qui contient removeLang, celle qui est à sa gauche, et celle qui est à sa droite. Un schéma ?

Code:

---

1 2 3 4 5 6 7 8 9 10

spokenLangs = "English, German, Italien, Spanish"; removeLang = "German"; en rouge : la partie à enlever en vert : la partie gauche en bleu : la partie droite English, German, Italien, Spanish ^ ^ ^ ^ 0 a b spokenLangs.length - 1

---

Tu trouves a en utilisant la méthode indexOf :

Code:

---

a = spokenLangs.indexOf(removeLang);

---

b découle de a, il suffit de rajouter la longueur de removeLang, plus 1 ou 2 pour compter la virgule et l'espace. À toi de faire des tests pour ajuster.

Une fois que tu as calculé a et b, tu les utilises pour obtenir les sous-chaînes gauche (verte) et droite (bleue) avec la méthode substring. Par exemple :

Code:

---

var partieGauche = spokenLangs.substring(0, a);

---

Et il ne te reste plus qu'à recoller les deux bouts ensemble, simplement avec +.

À la fin, si tu as bien fait comme il faut, tu obtiens ça :

Code:

---

English, Italien, Spanish

---

Salut Watilin, j'aurais plutôt vu un truc avec replace du style

Code:

---

1 2 3 4

if( ! $(this).is(':checked')) { removeLang = $(this).val() + ", "; spokenLangs = spokenLangs.replace(removeLang, ''); }

---

Merci à vous pour vos réponses :D

Alors j'ai essayée vos propositions et celle de NoSmoking me parait plus juste (enfin c'est surtout celle qui fonctionne) ^^

Du coup voici mon nouveau code (pour la partie JS)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var spokenLangs = new Array(); //"English, French, German, Italian, Russian" var checked = 0; //Quand une case est coché $("input[name='language']").click(function () { if ($(this).is(':checked') == true) { checked++; if (checked > 1) { //Plusieurs langues = j'ajoute une virgule spokenLangs += ", " + $(this).val(); } else { spokenLangs += $(this).val(); } $("#spoken").html("<font size='2'>"+spokenLangs+"</font>"); } if ($(this).is(':checked') == false) { checked--; removeLang = ", " + $(this).val(); spokenLangs = spokenLangs.replace(removeLang, ''); $("#spoken").html("<font size='2'>"+spokenLangs+"</font>"); } });

---

Maintenant quand je sélectionne une langue, je me retrouve avec "English"
Si j'en sélectionne plusieurs, j'ai bien "English, Spanish, German, ..."

Cependant il reste un petit bug qui est un peu embêtant :?

Quand je décoche une langue, celle-ci disparaît bien de ma div sauf si la langue décochée est celle qui a été cochée en premier :roll:

Exemple je coche : English, Spanish, Russian, Italian
Si je décoche : Spanish + Italian > j'obtiens English, Russian
Mais si je décoche English (la 1ere langue cochée) et bien ça me décoche aucune autre :s

Je me gratte la tête depuis tout à l'heure a essayer de comprendre. A me voir de loin, on pourrait penser que j'ai des poux :mouarf:

Une idée ? Et merci pour les précédentes réponses =)

C'est encore moi =)

Voilà je vous remercie tous pour votre aide et surtout votre rapidité 8O

Grâce à vos éclaircissements, j'ai trouvée la solution :P happy !!!

Pour ceux qui veulent le code final, faites moi signe :)

Et un sujet de plus résolu ^^

Encore merci et si je peux être utile pour autre chose (PHP, ASP ou autre), n'hésitez pas !

Ah oui tiens, il y avait replace… J'ai eu une absence :aie: