How To Set Password Toggle Visibility In JQuery

  Oct 2023
  Category: jQuery
How To Set Password Toggle Visibility In JQuery

Hi Developers,

Today Lets see How To Set Password Toggle Visibility In JQuery, It is necessary to set password toggle visibility for better user experience. The user should know which password they are typing. In many website due to the security reasons the password length will be more than 15 characters, So without password visibility the user will type blindly without knowing what are they typing so its necessary to set password toggle visibility,

Explore the step-by-step guide on implementing a password toggle visibility feature in jQuery. Elevate user experience by incorporating this functionality seamlessly into your web forms. Learn the essential techniques to enhance security and usability effortlessly.

Let's Start Coding

Basically show password checkbox is a input field and by using the onclick function it will call the myFunction()

In the function, initially we get the tag information of the password input field using the id, After fetching the tag information we can just change the value of the type attribute from password to text and vice versa using the if else statement.

<!DOCTYPE html>

<p>How To Set Password Toggle Visibility In JQuery ITSolutionsGuides</p>

Password: <input type="password" value="ITSolutionsGuides" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

function myFunction() {
  var tag = document.getElementById("myInput");
  if (tag.type === "password") {
    tag.type = "text";
  } else {
    tag.type = "password";


We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides