در این پست می‌خواهیم نحوه اضافه کردن یک چک باکس برای رمز عبور پنهان, هنگام وارد کردن رمز عبور توسط کاربر در زمان ثبت نام یا زمان ورود پیاده‌سازی کنیم. ما گاهی اوقات به نمایش رمز عبور نیاز داریم زیرا با استفاده از آن می توانیم تشخیص دهیم که رمز عبور درست یا غلط است.
در این مثال من فقط از رویداد change جی کوئری در چک باکس استفاده می‌کنم، اگر علامت بزنید، کاربر می‌تواند رمز عبور وارد شده خود را ببیند و هر چیزی را تغییر دهد، بنابراین می‌توانید پیش‌نمایش را ببینید و همچنین نسخه نمایشی را با کد بررسی کنید.
<html lang="fa">
<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>
