Thursday, May 19, 2016

Show or Hide div on checkbox click JavaScript

In this article, I am going to explain how to div show and hide on  checkbox click in ASP. Net  using JavaScript

Suppose You have a checkbox with the name of "chkselect" and you want to show or hide div on checkbox click , Here aspx code which provide you such facility


<%@ 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 type="text/javascript">
        function showhide() {
            var select = document.getElementById("chkselect");
            if (select.checked) {
                document.getElementById("showhide").setAttribute("style", "display:inline");
            }
            else {
                document.getElementById("showhide").setAttribute("style", "display:none");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset>
    <legend>Show and Hide Div</legend>
    <asp:CheckBox ID="chkselect" runat="server" onchange="return showhide();"/>
    </fieldset>
    <div id="showhide" runat="server" style="display:none;">
    <span style="color:Red">Welcome at http://www.dotnetdarpan.blogspot.com/</span>
    </div>
    </form>
</body>
</html>


Output

No comments:

Post a Comment