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.
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 Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.