Show hide password on checkbox click event using javascript

Apr 21, 2016 By Mohammed Imtiyaz

Download 

Demo

Demo

Introduction

In this tutorial we’ll learn how to show or hide password on checkbox click event using javascript

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Show hide password on checkbox click event using javascript</title>

    <script language="javascript" type="text/javascript">

        function ShowHidePassword(obj) {

            if (obj.checked) {

                document.getElementById('<%=txtPassword.ClientID %>').type = 'text';

            }

            else {

                document.getElementById('<%=txtPassword.ClientID %>').type = 'password';

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <span class="inputLabel">Enter Password</span>&nbsp;<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="inputText"></asp:TextBox><br />

    <asp:CheckBox ID="checkbox1" runat="server" Checked="false" onclick="ShowHidePassword(this);"

        Text="Show Password" CssClass="inputLabel" />

    </form>

</body>

</html>

 

index.html

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

    <title>Show hide password on checkbox click event using javascript</title>

    <script language="javascript" type="text/javascript">

        function ShowHidePassword(obj) {

            if (obj.checked) {

                document.getElementById('pwd').type = 'text';

            }

            else {

                document.getElementById('pwd').type = 'password';

            }

        }

    </script>

</head>

<body>

    <h1>Show hide password password on checkbox click event using javascript</h1>

    <span class="inputLabel">Enter Password  </span><input id="pwd" type="password" class="inputText" /><br />

    <span id="pwdText" class="inputLabel">

        <input type="checkbox" id="checkbox1" onclick="ShowHidePassword(this)" />

        Show Password</span>

</body>

</html>

 



Post your comment