Discussion :

[boboo5]

Bonjour la communauté

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

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 html :

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

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 :

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

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 =)

[NoSmoking]

Bonjour,

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)

[Watilin]

Salut et bonne année !

Code :

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

			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 :

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

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 :

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

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 :

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

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 :

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

English, Italien, Spanish

[NoSmoking]

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

Code :

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

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

[boboo5]

Merci à vous pour vos réponses

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 :

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

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

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

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

[boboo5]

C'est encore moi =)

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

Grâce à vos éclaircissements, j'ai trouvée la solution 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 !

[Watilin]

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