Password Show/Hide on Checkbox click
This
is a simple tutorial to show a password in a input box when a checkbox
is checked and hide it when the checkbox is unchecked using jQuery.
Requirement
HTML Markup
|
|
<input type="password" class="password"><br>
<input type="checkbox" id="showHide"> Show?
|
We have a password
input field with the class “
password” and a
checkbox with the id “
showHide”
jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type="text/javascript">
$(document).ready(function () {
$("#showHide").click(function () {
if ($(".password").attr("type")=="password") {
$(".password").attr("type", "text");
}
else{
$(".password").attr("type", "password");
}
});
});
</script>
|
Include jQuery Library.
Place the code inside of
document ready function as above.
When the checkbox is clicked, input field password type will be changed to text type.
So the password will be visible.
Yeah, That’s it. keep sharing this post.
.png)
0 comments :