Changer de couleur un label.

**Shandler** · 19/10/2007, 17h10

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 :

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

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.

**d-Rek** · 19/10/2007, 17h18

Bonjour,

Utilise la balise code s'il te plait.

Code Javascript :

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

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

Code HTML :

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

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>

**E.Bzz** · 19/10/2007, 17h28

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+

**Shandler** · 19/10/2007, 17h28

Merci ca marche comment ton code ?

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

Code :

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

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

**d-Rek** · 19/10/2007, 17h46

Montre ton code HTML correspondant s'il te plait..
Ca devrait fonctionner pourtant.

**E.Bzz** · 19/10/2007, 17h52

Envoyé par d-Rek

Ca devrait fonctionner pourtant.

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

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

A+

**Shandler** · 19/10/2007, 18h20

Code :

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

<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.

**d-Rek** · 19/10/2007, 18h43

T'es sous IE 2.1 ?

Ecoute E.Bzz, il dit pas que des bétises

**SpaceFrog** · 19/10/2007, 19h09

oui heu ...
label ... voir la propriété for aussi qui peut petre intéressante ...

**Shandler** · 19/10/2007, 19h35

Code :

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

<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

**SpaceFrog** · 20/10/2007, 11h57

le label est une balise à part ... ne pas inclure l'inout dans le label !!!
mais le problème ne vient pas de là ..

**Shandler** · 20/10/2007, 17h21

Personne ne saurait pouquoi cette fonction ne marche pas ?

Code :

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

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 :

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

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

Merci de votre aide.

**SpaceFrog** · 20/10/2007, 18h02

testé :

Code :

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

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 ...

**Shandler** · 20/10/2007, 18h27

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.

**SpaceFrog** · 22/10/2007, 08h46

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

il suffit alors de boucler sur la collection de radios à chaque click ...

**Shandler** · 22/10/2007, 11h42

Comment ca ?

Merci de ton aide.

**SpaceFrog** · 22/10/2007, 11h55

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

**Shandler** · 22/10/2007, 17h19

Merci ca marche nickel.

Changer de couleur un label.

JavaScript

Discussions similaires

Partager

Partager