Hey Mates,

Today i’m going to explain to you how to create a checkbox that show/hides password field characters.

We will be working with jQuery code, but you can easily can do it in any other framework.

First lets see our markup:

<label for="passChange">Show/Hide password</label>
<input type="checkbox" name="passChange" />
<label for="password">Your password</label>
<input type="password" name="password" />

then we will add our jQuery to that page (best is in a linked JS file):

$(document).ready(function(){
var $passChange = $('input[name=passChange]'),
$password = $('input[name=password]');
$passChange.click(function(){
if($(this).is(':checked')){
$password.attr('type','text');
} else {
$password.attr('type','password');
}
});
});

That JS code will select our two fields, The checkbox and the input password itself.

And then i have added the bind to click on the checkbox, on each click i will check if the checkbox is checked then show the password else hide the password.

Image via Wikipedia

Be Sociable, Share!

•