Jquery - Show hide password in Password textbox using checkbox.

By Hardik Savani | July 11, 2016 | | 1816 Viewer | Category : Javascript HTML jQuery


Share this post:

In this post we can implement how to add hide show password when user input password at register time or login time. We sometimes require to do it because that use can determine password is right or wrong.

In this example i use just jquery change event on checkbox, if check then user can see his entered password and change anything, so you can see preview and also check demo with code.

Preview:

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>