formulaire réactif : input radio avec fond bleu au clic

Version imprimable

Bonjour,
Dans mon formulaire, je souhaiterai ajouter un fond bleu lors de la sélection d'un des boutons radio.
Mon code aujourd'hui est :
Code:

1 2 3 4 5 6 7 8 9 10 <div class="small_box"> <input type="radio" class="radio" name="moteur" value="sejours" /> <img src="img/f_icon_1.jpg" alt="" /> <label><span>Séjours</span></label> </div> <div class="small_box"> <input type="radio" class="radio" name="moteur" value="circuits"/> <img src="img/f_icon_2.jpg" alt="" /> <label><span>Circuits</span></label> </div>
Merci pour vos réponses.

Ceci te convient ?

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	$("input[name=moteur]").change(function(){
		// On met a tous les labels un fond de couleur blanc
		$("input[name=moteur]").each(function(){
			$(this).next().next().css("background-color","white");
		});
		// On met un fond bleu au label qui suit la case a cocher
		$(this).next().next().css("background-color","blue");
	});
});

Voilà un truc opérationnel avec ton exemple.:mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
	<head>
		<title>Test Radio</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
	$(function(){
 
 
		$("input.radio").change(function(){ //on attends un evenement sur un bouton Radio		
			$("input.radio").each(function(){//On mets tous les input au même niveau de couleur
				$(this).parent("div").children("label").children("span").css("background-color","white");
			});
 
			$(this).parent("div").children("label").children("span").css("background", "blue");// On mets en couleur bleu le button activé
			}
		)
	});
 
		</script>
	</head>
 
	<body>
 
 
		<div class="small_box">
<input type="radio" class="radio" name="moteur" value="sejours" />
<img src="img/f_icon_1.jpg" alt="" />
<label><span>Séjours</span></label>
</div>
<div class="small_box">
<input type="radio" class="radio" name="moteur" value="circuits"/>
<img src="img/f_icon_2.jpg" alt="" />
<label><span>Circuits</span></label>
</div>
 
	</body>
	</html>