11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Modifier script checkbox

Bonjour Smiley biggrin ,

j'utilise le script ci-dessous qui permet d'afficher la valeur d'une ou plusieurs checkbox dans un champ texte lorsque l'on clique dessus. J'aimerai le modifier légèrement pour que les valeurs qui s'affichent dans le champ texte soit séparées par une virgule (lorsque que plus d'une checkbox est cochée) et qu'elles s'affichent toujours dans le même ordre.

J'espère que vous pourrez m'aider à modifier le script...


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Checkbox</title>
<script language="javascript" type="text/javascript">
function change(code, ch)
{
	var champ = document.getElementById(ch);
	var valeur = champ.value;
	if(valeur.search(code) != -1)
	{  
	valeur = valeur.replace(' '+code+' ', '');
	champ.value = valeur;
	return false;
	}  
	else  
	{  
	champ.value += ' '+code+' ';
	return true;
	}
}
</script>
</head>
<body>
<form>
<input type="text" id="champ" name="champ" size="40"><br>
<input type="checkbox" name="cocher" value="1" onclick="change('Musclor', 'champ');" > Première valeur<br>
<input type="checkbox" name="cocher" value="2" onclick="change('Skeletor', 'champ');"> Seconde valeur<br>
<input type="checkbox" name="cocher" value="3" onclick="change('Gringer', 'champ');"> Troisième valeur
</form>
</body>
</html>
Bonjour,
Voici ce que je te propose
javascript:
function change(code, ch){
var champ = document.getElementById(ch);
champ.value='';
for (i=1;i<4;i++){
	coch = document.getElementById('coch'+i);
	if (coch.checked) {
		if (champ.value!=''){
			champ.value += ', ';
		}
		champ.value += ' '+coch.value+' ';
	}
}
}

html:
<form>
<input type="text" id="champ" name="champ" size="40" value=""><br>
<input type="checkbox" name="cocher" id="coch1" value="Musclor" onclick="change('Musclor', 'champ');" > Première valeur (Musclor)<br>
<input type="checkbox" name="cocher" id="coch2" value="Skeletor" onclick="change('Skeletor', 'champ');"> Seconde valeur (Skeletor)<br>
<input type="checkbox" name="cocher" id="coch3" value="Gringer" onclick="change('Gringer', 'champ');"> Troisième valeur (Gringer)
</form>
Bonjour comar91, c'est exactement ce que je souhaitai, merci beaucoup.
J'aurai une question encore, est-il possible d'afficher les valeurs que j'ai mise en gras ci dessous au lieu de celle ci: value="Musclor"


<form>

<input type="text" id="champ" name="champ" size="40" value=""><br>

<input type="checkbox" name="cocher" id="coch1" value="Musclor" onclick="change('[b]Musclor[/b]', 'champ');" > Première valeur (Musclor)<br>

<input type="checkbox" name="cocher" id="coch2" value="Skeletor" onclick="change('[b]Skeletor[/b]', 'champ');"> Seconde valeur (Skeletor)<br>

<input type="checkbox" name="cocher" id="coch3" value="Gringer" onclick="change('[b]Gringer[/b]', 'champ');"> Troisième valeur (Gringer)

</form>


A+ Smiley biggrin
Modifié par Sclormu (02 Jan 2008 - 15:52)
Bonsoir comar, en faite dans le champ texte je ne veux pas afficher ce qui se trouve dans value mais dans onclick="change('Musclor', 'champ');"
J'espere que je suis plus clair... Smiley confused
Bonsoir,
Si tu n'as pas besoin des valeurs initiales (1,2,3), je pense que le mieux est d'associer le texte qui va bien au value et de supprimer le 1er paramètre de la fonction change (aux appels aussi..)
Cela permet à la fonction d'aller chercher la valeur du texte à afficher de manière simple.
Bonjour comar, j'ai pas très bien compris tes derniers conseils Smiley confused . L'idéal serai le script que j'avais avec les améliorations que tu m'as proposé. Mais bon si cela n'est pas possible ton script me conviendra très bien...Merci...

A+
Bonjour Sclormu,
Le script que je t'ai proposé 're' détermine à chaque appel le contenu de 'champ' en balayant TOUTES les 'checkbox' dans l'ordre et en testant si elles sont 'chéckées' et si c'est le cas en récupérant leur value.
C'est une autre manière de faire qu'avec ton script initial que je t'ai proposée pour répondre aux problèmes d'ordre et d'apparition des virgules...
Je regarde si j'arrive à quelque chose en partant de ton script initial mais je crains un 'gros bousin' Smiley confus .
Je te tiens au courant Smiley cligne
Voici une autre version, javascript:

function change(code, ch){
var champ = document.getElementById(ch);
var reg=new RegExp("[ ,;]+", "g");
champ.value='';
for (i=1;i<4;i++){
	coch = document.getElementById('coch'+i);
	if (coch.checked) {
		var cli = new String(coch.onclick);
		var par = cli.substring(cli.indexOf('change'), cli.length).replace(/change\(/, '').replace(/'/g, '').replace(/"/g, '').split(reg);
		if (champ.value!=''){
			champ.value += ', ';
		}
		champ.value += ' '+par[0]+' ';
	}
}
}

html:

<input type="text" id="champ" name="champ" size="40" value=""><br>
<input type="checkbox" name="cocher" id="coch1" value="1" onclick="change('Musclor', 'champ');" > Première valeur (Musclor)<br>
<input type="checkbox" name="cocher" id="coch2" value="2" onclick="change('Skeletor', 'champ');"> Seconde valeur (Skeletor)<br>
<input type="checkbox" name="cocher" id="coch3" value="3" onclick="change('Gringer', 'champ');"> Troisième valeur (Gringer)

Smiley langue Smiley cligne
Cela répond à ton besoin ?
Bonjour comar Smiley biggrin ,

Le dernier script que tu me propose fonctionne comme je le souhaite, je te remercie pour ton aide...
par contre j'ai remarqué qu'il supprime tous les mots après un espace
Par ex: 

<input type="checkbox" id="coch1" value="1" onclick="change('[b]Musclor et Skeletor[/b]', 'champ');" > Première valeur (Musclor)

Seul le mot musclor est afficher.

Encore merci de m'avoir fait profiter de tes compétences...
A+ Smiley cligne
Smiley confused j'ai fait la modif, alors sous IE cela ne fonctionne pas et sous FF les carateres speciaux ne passe pas (ex: Musclor\xA0Skeletor)... Smiley sweatdrop

rectif : IE fonctionne...

A+ Smiley biggrin
Modifié par Sclormu (04 Jan 2008 - 16:40)
a écrit :
Chez moi cela fonctionne sur IE 7, FF 2.00.11 mais pas sur OP 9.25

Y compris les accents sous FF?

Edit: IE : OK
OP 9.25 : OK
FF : les accent ne fonctionne pas?? Smiley crash
Modifié par Sclormu (04 Jan 2008 - 19:49)
j'ai résolu le petit souci de firefox... Merci beaucoup Comar...

A+ Smiley biggrin
Modifié par Sclormu (07 Jan 2008 - 06:53)
Sujet clos
Aller à