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

juin 30, 2019février 10, 2020 Amine KOUIS Aucun commentaire

L’exemple suivant explique comment afficher et masquer des blocs div en fonction du checkboxe cochée en utilisant la méthode toggle() de jQuery. Les blocs div de l’exemple suivant 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="checkbox"]').click(function(){
					var val = $(this).attr("value");
					$("." + val).toggle();
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="color" value="yellow"> jaune
		<input type="checkbox" name="color" value="red"> rouge
		<input type="checkbox" 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>