ASP.NET : Checkbox click Show/Hide password using Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

ASP.NET : Checkbox click Show/Hide password using Jquery

In this article I am going to explain how to show and hide the password on checkbox click using Jquery in asp.net.

ASP.NET : Checkbox click Show/Hide password using Jquery


Description:
In this tutorial we are going to learn how to show and hide the password. We can use this snippet on registration form to compare the retype password or on login page.

Implementation:

 Add a webform to project. Drag and drop the textbox and checkbox from toolbox to webform.
Add the below given Jquery code in head section of page/webform.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript">
      $(function () {
          $("#chkSHPwd").bind("click", function () {
              var txtPassword = $("[id*=txtpwd]");
              if ($(this).is(":checked")) {
                  txtPassword.prop("type", "text");
                  $("label[id*=lblshowhide]").text("Hide Password");
              } else {
                txtPassword.prop("type", "password");
                  $("label[id*=lblshowhide]").text("Show Password");
              }
          });
      });
</script>

Complete HTML Markup of Webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type="text/javascript">
      $(function () {
          $("#chkSHPwd").bind("click", function () {
              var txtPassword = $("[id*=txtpwd]");
              if ($(this).is(":checked")) {
                  txtPassword.prop("type", "text");
                  $("label[id*=lblshowhide]").text("Hide Password");
              } else {
                txtPassword.prop("type", "password");
                  $("label[id*=lblshowhide]").text("Show Password");
              }
          });
      });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
    <tr><td>Enter Password :</td><td>
        <asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox></td></tr>
        <tr><td></td><td>
            <asp:CheckBox ID="chkSHPwd" runat="server" />
            <label ID="lblshowhide" runat="server">Show Password</Label> </td></tr>
    </table>
    </div>
    </form>
</body>
</html>


Now run the project and test it. Hope it will be help you. 


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon