Changer de couleur un label.

Version imprimable

19/10/2007, 17h10
Shandler

Changer de couleur un label.
Bonjour,

Jai un formulaire avec plusieurs bouton radio qui se suive et j'aimerai faire que quand on sélectionne un radio le fond du label qui accompagne se radio change de couleur.
Code:

1 2 3 <input type="radio" name="test" /><label>blaaaaa</label> <input type="radio" name="essai" /><label>blooooo</label> <input type="radio" name="go" /><label>bliiiiiiiiiiii</label>
Merci de votre aide.

Bonjour,

Utilise la balise code s'il te plait.

Code:

1
2
3
4
5
6
function $(id){return document.getElementById(id);}
function color(id, color){
	if($(id)){
		$(id).style.backgroundColor='#'+color;
	}
}

Code:

1
2
3
<label for="test"><input type="radio" name="test" id="test" />blaaaaa</label>
<label for="essai"><input type="radio" name="essai" id="essai" />blooooo</label>
<label for="go"><input type="radio" name="go" id="go" />bliiiiiiiiiiii</label>

19/10/2007, 17h28
E.Bzz

Bonjour,
attention toutefois à ne pas inclure l'input dans le label qui lui est associé : il y a une gestion d'évènement entre les 2 ("transfert" du clic), et ça risque de perturber ...

A+

Merci ca marche comment ton code ?

Moi j'avais trouvé ca mais j'arrive pas le faire marcher correctement :
Code:

1 2 3 4 5 function couleur() { var d = document.getElementById('solution'); d.style.backgroundColor = (document.getElementById('test').checked == true) ? '#EED81B' : '#fff'; }
solution etant un id de mon lable

merci a toi

19/10/2007, 17h46
d-Rek

Montre ton code HTML correspondant s'il te plait..
Ca devrait fonctionner pourtant.
19/10/2007, 17h52
E.Bzz

Citation:

Envoyé par d-Rek

Ca devrait fonctionner pourtant.

Faudrait peut-être l'appeler, la fonction color() :mrgreen:

J'ai l'impression que ma remarque précédente est passée à l'as :cry:

A+
19/10/2007, 18h20
Shandler

Code:

<input type="radio" name="devise" value="1" onclick="couleur('solution');" id="soluce" /><label id="solution" > blabla</label><br />

J'ai essayé de mettre des variable dans ma fonction mais ca marche pas non plus.
19/10/2007, 18h43
d-Rek

T'es sous IE 2.1 ? :lol:

Ecoute E.Bzz, il dit pas que des bétises :rire:
19/10/2007, 19h09
SpaceFrog

oui heu ...
label ... voir la propriété for aussi qui peut petre intéressante ...
19/10/2007, 19h35
Shandler

Code:

<label for="test"><input type="radio" name="test" onclick="color('test','#5B79AD');" id="test" />blaaaaa</label>

J'applique le script de E.Bzz ainsi mais ca ne marche toujours pas.

Merci a vous
20/10/2007, 11h57
SpaceFrog

le label est une balise à part ... ne pas inclure l'inout dans le label !!!
mais le problème ne vient pas de là ..
20/10/2007, 17h21
Shandler
Personne ne saurait pouquoi cette fonction ne marche pas ?
Code:

1 2 3 4 5 6 function couleur(name,id) { var d = document.getElementById(name); d.style.backgroundColor = (document.getElementById(id).checked == true) ? '#EED81B' : '#fff'; }
Code:

<input type="radio" name="devise" value="1" onclick="couleur('solution','soluce');" id="soluce" /><label id="solution" >Un test</label><br />

Merci de votre aide.

testé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
function couleur(monname,monid)
{  
      var d = document.getElementById(monname);
      d.style.backgroundColor = (document.getElementById(monid).checked==true) ? '#EED81B' : '#fff';
}
</script>
</head>
 
<body>
<input type="radio" name="devise" value="1" onclick="couleur('solution','soluce');" id="soluce" /><label id="solution" for="soluce" >Un test</label><br />
</body>
 
</html>

et ça marche ...

20/10/2007, 18h27
Shandler

Oui ca marche mais le seul probléme quand j'ai plusieurs radio et que je change de radio la couleur reste sur l'ancien bouton sélectionné.

Merci de ton aide.
22/10/2007, 08h46
SpaceFrog

ce n'était pas dans le cahier des charges ...

il suffit alors de boucler sur la collection de radios à chaque click ...
22/10/2007, 11h42
Shandler

Comment ca ?

Merci de ton aide.

:roll:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type='text/javascript'>
function couleur(obj)
{     var TabRadios=document.getElementsByName(obj.name);
 
		for (i=0;i<TabRadios.length;i++){
		 document.getElementById(TabRadios[i].id+"_L").style.backgroundColor = ((obj==TabRadios[i])&&obj.checked) ? '#EED81B' : '#fff';
 
 
		 }
}
</script>
</head>
 
<body>
<input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce1" /><label id="soluce1_L" for="soluce1" >Un test</label><br />
<input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce2" /><label id="soluce2_L" for="soluce2" >Un autre test</label><br />
<input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce3" /><label id="soluce3_L" for="soluce3" >Un autre test</label><br />
<input type="radio" name="devise" value="1" onclick="couleur(this);" id="soluce4" /><label id="soluce4_L" for="soluce4" >Un autre test</label><br />
 
 
</body>
 
</html>

22/10/2007, 17h19
Shandler

Merci ca marche nickel.