show password option in asp.net using checkbox

Show password option for the Password field can be obtained by placing the checkbox and using some piece of JavaScript code to obtain this functionality. This can be done in onchange or onclick events of the checkbox. Find the example below.

ASPX code: Using onchange Event


<html>
<head runat="server">
    <title>Show password checkbox</title>
</head>
<body>
    <form id="form1" runat="server">
      <div><br />
         <asp:Label ID="Label1" runat="server" Text="User name:">
         </asp:Label><asp:TextBox ID="Uname" runat="server"></asp:TextBox>
         <br />
         <asp:Label ID="Label2" runat="server" Text="Password :"></asp:Label>
         <asp:TextBox TextMode="Password" ID="password" runat="server"></asp:TextBox>
         <input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'">
            Show password
       </div>
    </form>
</body>
</html>


[OR]


ASPX code: Using onclick Event

<html>
<head runat="server">
    <title>Show password checkbox : fourthbottle</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
          Password :
          <input type="password" name="password" id="password" />
          <input type="checkbox" id="pass" onclick="showpass(this);" />
           Show Password
            <script type="text/javascript">
                function showpass(check_box) {
                    var spass = document.getElementById("password");
                    if (check_box.checked)
                        spass.setAttribute("type", "text");
                    else
                        spass.setAttribute("type", "password");
                }
           </script>
        </div>
    </form>
</body>
</html>


-Anantha Bharani Guhan