How to show/hide DIV based on Radio Button click

In this tutorial, we are going to see how to show/hide DIV based on Radio Button click. The following example will show you how to show and hide DIV elements based on radio buttons using jQuery’s show() and hide() methods. The div blocks in the example are hidden by default using the CSS “display” property, which is set to “none”.

How to show/hide DIV based on Radio Button click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Show/hide DIV based on Radio Button click</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"> Yellow
		<input type="radio" name="color" value="red"> Red
		<input type="radio" name="color" value="green"> Green
		<div class="yellow msg">You have selected Yellow</div>
		<div class="red msg">You have selected Red</div>
		<div class="green msg">You have selected Green</div>
	</body>
</html>

Result
Yellow Red Green You have selected Yellow You have selected Red You have selected Green

How to show/hide DIV based on Radio Button click

You May Also Like

How to detect a click outside an element with jQuery

How to Get the Value in an Input Text Box using jQuery

How to detect the Enter key in a text input field using jQuery

Leave a Reply Cancel reply