Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Hide a Div on Radio Button Click (Selection) Example

May 9, 2015
Introduction

Here I will explain how to use
jQuery to show or hide div when changing the selection of radio button with example or jQuery show or hide a div on radiobutton click / selection or jQuery show and hide div on radio button click or selection with example.


To show or hide div when changing radio button selection using jQuery we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('input[name=rdbStatus]').change(function () {
var selval = $('input[name=rdbStatus]:checked').val();
if(selval=='Show')
$("#testdiv").fadeIn();
else
$('#testdiv').fadeOut();
})
});
</script>


If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>jQuery Show or Hide Div on radio button click or selection</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('input[name=rdbStatus]').change(function () {
var selval = $('input[name=rdbStatus]:checked').val();
if(selval=='Show')
$("#testdiv").fadeIn();
else
$('#testdiv').fadeOut();
})
});
</script>
</head>
<body>
<form id="form1">
<div>
<b>Select Radio Button :</b>
<input type="radio" name="rdbStatus" value="Show" checked="checked" />Show
<input type="radio" name="rdbStatus" value="Hide" />Hide
<br /><br />
<div id="testdiv" style="padding:20px; border:5px solid #fff; width:30%; font-weight:bold;background:#EB5E00;color:#fff;">
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
</div>
</div>
</form>
</body>
</html>

Live Demo

For live demo try to change radio button options to show or hide div elements



Select Radio Button : Show Hide


Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com Welcome to Aspdotnet-Suresh.com


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

imediadesigns said...

very nice tutorial , thanks

WordPress Toronto said...

This was really helpful. Thanks for the post!

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.