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 to Show Hide a Div when Checkbox is Checked (Selected) or Unchecked

May 9, 2015
Introduction

Here I will explain how to use
jQuery to show or hide div when checkbox checked (selected) or unchecked or jQuery show and hide div tag based on checkbox selection with example or jQuery show div with elements when checkbox checked / selected otherwise hide div elements when checkbox unselected / unchecked.

Description:
  
In previous articles I explained jQuery fadein fadeout effects example, jQuery drag and drop div example, jQuery show hide or toggle div content 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 checkbox checked or unchecked with example.

To show or hide div using jQuery when checkbox selected we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('#chkStatus').change(function () {
if ($('#chkStatus').is(':checked'))
$("#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 Check Check whether Checkbox Selected or Not</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#chkStatus').change(function () {
if ($('#chkStatus').is(':checked'))
$("#testdiv").fadeIn();
else
$('#testdiv').fadeOut();
});
});
</script>
</head>
<body>
<form id="form1">
<div>
Show or Hide Div: <input type="checkbox" id="chkStatus" checked="checked"/> <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 check or uncheckbox checkbox to show or hide div elements


Show or Hide Div:

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

0 comments :

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.