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.
Description:
In previous articles I explained jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, Asp.net make single radio button selection in gridview, jQuery clear radiobuttonlist selection, jQuery validate radiobuttonlist with example, jQuery slideup, slidedown, slidetoggle effects example, jQuery add border to images using css classes and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to show or hide div when changing radio button selection with example.
In previous articles I explained jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, Asp.net make single radio button selection in gridview, jQuery clear radiobuttonlist selection, jQuery validate radiobuttonlist with example, jQuery slideup, slidedown, slidetoggle effects example, jQuery add border to images using css classes and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery to show or hide div when changing radio button 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 Email
|
|||
4 comments :
very nice tutorial , thanks
This was really helpful. Thanks for the post!
Please help me Sir...
In your code by default Showbutton selected but
I want no select default. It is selected by user.
By default hide textBox
Note: Only a member of this blog may post a comment.