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

juin 30, 2019février 10, 2020 Amine KOUIS 3 Commentaires

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

QCMs qui pourraient vous intéresser :

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

oliv
février 24, 2020 à 11:40 am
Permalien

merci
Répondre
guillaume
juillet 6, 2020 à 6:15 am
Permalien

salut j’aurais besoin d’aide pour pouvoir acceder à un tableau en fonction du bouton radio d’un autre tableau (https://waytolearnx.com/2019/07/comment-ajouter-ou-supprimer-des-lignes-dans-un-tableau-en-jquery.html (j’ai un peu modifier le tableau mais le fonctionnement est le même)) tu saurais comment y remedier ?
Répondre
Mcire
août 4, 2021 à 7:06 pm
Permalien

Salut a tous, je travail sur un projet et je suis bloqué au niveau de la création de formulaire.

Nb : je ne connais pas le js,ais j’utilise souvent des scripts dans mes codes.

Voici ce que je veux faire:

mettre un bouton ajouter un champ et un autre supprimer un champ. J’ai trouver un script que j’ai légèrement modifier et qui me permet de faire les 2

Le problème c’est au niveau de la suppression, il me supprime mon bouton ajouter un champ;
Répondre

Code source :

Vous pourrez aussi aimer

Comment définir la propriété CSS background-image en jQuery

Comment ajouter <li> dans une liste <ul> existante en jQuery

Comment faire une redirection automatique en jQuery/JavaScript

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

Laisser un commentaire Annuler la réponse