Showing posts with label javascript hide and show div on click demo. Show all posts
Showing posts with label javascript hide and show div on click demo. Show all posts

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