How to Show hide password in Password textbox using checkbox?

Today now in this post i will show you How to Show hide password in Password textbox using checkbox? Here i will implement how to add hide and show password when any user input the password at register time or when user login. Now sometimes we need to do this because that use can determine the password is right or wrong.

So in this example i will use just jquery to change event on checkbox, if check then the user can see his entered password and can change anything.

Example:
<html lang="en">
<head>
    <title>Jquery - Show hide password in Password textbox using checkbox</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="container">
  <h2>Jquery - Show hide password in Password textbox using checkbox</h2>
  <input type="password" class="form-control my-password" name="password" />
  <input type="checkbox" class="showPassword" />Show Password</div>
  <script type="text/javascript">
      $(document).ready(function(){
        $('.showPassword').on('change',function(){
          var isChecked = $(this).prop('checked');
          if (isChecked) {
            $('.my-password').attr('type','text');
          } else {
            $('.my-password').attr('type','Password');
          }
        });
      });
  </script>
</div>
</body>
</html>

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →