Introduction:
In this article i am going to explain How to dynamically unhide the controls/contents
placed inside div tag on selecting the checkbox and hide and clear out the controls
e.g. textbox placed in div tag when we unselect the checkbox in asp.net using jQuery.
In previous articles i explained jQuery to Show/Hide Div content based on DropDownList selected value and Print page content placed inside DIV tag with print preview using JavaScript in Asp.net and Validate CheckBoxList using jQuery and Show image preview before uploading through asp.net fileupload control using jQuery and Show jQuery notification pop up message box and hide after 5 seconds and JavaScript to enable disable controls on textbox value change or typing text in TextBox
Description: While working on
asp.net projects i got the requirement to show the controls dynamically i.e. at
runtime e.g. textbox for taking user input on checking the checkbox and on unchecking,
hide the controls and clear the controls.
For example in this article, if
the user checks the checkbox asking for alternate email id then we need to show
textbox to take user input and if he uncheck the checkbox we need to hide and
clear out the textbox. This can be done easily by placing the textbox for
inputting alternate email id in the DIV tag and using jQuery we can show or
hide this DIV tag as shown in demo image above.
Implementation: Below is the HTML Source of the page having the
controls and jQuery script required for this demonstration.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=cbAlternateEmail.ClientID%>').bind('click', function
() {
if ($(this).is(":checked")) {
//Show
the div
$('#dvShowHide').show();
}
else {
//Hide
the div
$('#dvShowHide').hide();
//Clear
textbox
$('#<%=txtAlternateEmail.ClientID
%>').val('');
//Set focus in textbox
$('#<%=txtAlternateEmail.ClientID %>').focus();
//Set focus in textbox
$('#<%=txtAlternateEmail.ClientID %>').focus();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 270px;">
<legend>Show/Hide Div Content Demo</legend>
<asp:CheckBox ID="cbAlternateEmail"
runat="server"
Text="Alternate
Email ?" />
<div
id="dvShowHide"
style="display: none;">
Enter Email Id :<asp:TextBox ID="txtAlternateEmail" runat="server"></asp:TextBox><br />
</div>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
" I hope you have got How to show or hide the controls placed in DIV on checkbox check uncheck using jQuery in Asp.Net If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in and Pinterest,
stumbling my posts on stumble upon and subscribing for receiving free updates
directly to your inbox . Stay tuned and stay connected for more technical
updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..