#password {
margin-bottom: 10px;
}

Toggle Password Visibility Using Checkbox

Password

Show password

var passwordInput = document.getElementById(‘password’);
var toggleCheckbox = document.getElementById(‘toggle’);

toggleCheckbox.addEventListener(‘change’, function() {
if (toggleCheckbox.checked) {
passwordInput.type = ‘text’;
} else {
passwordInput.type = ‘password’;
}
});

In this example, we have created a simple HTML form with a password input field and a checkbox. The password input field is initially of type “password” to hide the characters entered. When the checkbox is checked, we change the type of the password input field to “text” to show the characters entered.

We have also added some basic styling to the form elements to make it look more presentable. You can further customize the styling as per your requirements.

JavaScript is used to add an event listener to the checkbox element. When the checkbox is checked or unchecked, the type of the password input field is toggled between “password” and “text” accordingly. This functionality allows the user to easily toggle the visibility of the password while entering it.

Overall, this example demonstrates how you can easily implement a password visibility toggle using a checkbox in JavaScript. It provides a user-friendly way for users to switch between hiding and showing the password as they type.