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