Password Show/Hide on Checkbox click

This is a simple tutorial to show a password in a input box when a checkbox is checked and hide it when the checkbox is unchecked using jQuery.

Password show hide with jQuery

Requirement

HTML Markup


<input type="password" class="password"><br>
<input type="checkbox" id="showHide"> Show?

We have a password input field with the class “password” and a checkbox with the id “showHide

jQuery


<script type="text/javascript">
 $(document).ready(function () {
 $("#showHide").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 }
 else{
 $(".password").attr("type", "password");
 }
 
 });
 });
</script>

Include jQuery Library.

Place the code inside of document ready function as above.

When the checkbox is clicked, input field password type will be changed to text type.

So the password will be visible.

Yeah, That’s it. keep sharing this post.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

5 comments on “Password Show/Hide on Checkbox click”

  1. I dont understand one thing, This whole thing could have been done with the help of if($(“.password”).attr(“type”)==”password”) then why did you go for $(“.password”).hasClass(“showing”).

      1. By the way, this could be even an easier way

        $(“#showHide”).click(function () {
        if ($(“#showHide”).attr(“checked”)==”checked”) {
        $(“.password”).attr(“type”, “text”);
        }
        else{
        $(“.password”).attr(“type”, “password”);
        }
        });

Leave a Reply

Your email address will not be published. Required fields are marked *