Afficher et masquer un bloc div en fonction de bouton radio – JQuery

L’exemple suivant vous montrera comment afficher et masquer des éléments div en fonction de boutons radio à l’aide des méthodes show() et hide() de jQuery. Les blocs div de l’exemple sont masquées par défaut à l’aide de la propriété « display » de CSS, dont la valeur est définie sur « none ».
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Afficher et masquer un bloc div en fonction de bouton radio</title>
		<style type="text/css">
			.msg{
				margin-top: 25px;
				padding: 25px;
				display: none;
				color: #fff;
			}
			.yellow{ 
				background: yellow; 
			}
			.green{ 
				background: green; 
			}
			.red{ 
				background: red; 
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('input[type="radio"]').click(function(){
					var val = $(this).attr("value");
					var target = $("." + val);
					$(".msg").not(target).hide();
					$(target).show();
				});
			});
		</script>
	</head>
	<body>
		<input type="radio" name="color" value="yellow"> jaune
		<input type="radio" name="color" value="red"> rouge
		<input type="radio" name="color" value="green"> vert
		<div class="yellow msg">Vous avez sélectionné le jaune</div>
		<div class="red msg">Vous avez sélectionné le rouge</div>
		<div class="green msg">Vous avez sélectionné le vert</div>
	</body>
</html>
Résultat
jaune rouge vert
Vous avez sélectionné le jaune
Vous avez sélectionné le rouge
Vous avez sélectionné le vert
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

2 réflexions sur “Afficher et masquer un bloc div en fonction de bouton radio – JQuery

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *