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

**liswann** · 08/11/2010, 20h32

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

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

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.

**scourjean** · 09/11/2010, 09h21

Ceci te convient ?

Code :

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

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");
	});
});

**llaffont** · 09/11/2010, 09h36

Voilà un truc opérationnel avec ton exemple.

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager