jQuery to Show Hide controls placed inside Div based on Asp.net Checkbox check uncheck

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.

Show or hide div containing control based on checkbox check uncheck in asp.net


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();
                }
            });
        });

    </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."
Previous
Next Post »

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..