I have an interface with multiple options/requests to enter a password. I am trying to create one Jquery function to toggle the password visibility for all of them without using specific selectors. My function shows the password on the first click but didn't hide it on the second click. What am I doing wrong here?

$('#toggle_pw_vis').click(function () {
    $(this).closest('form').find('input[type=password]').attr('type', $(this).is(':checked') ? 'text' : 'password');
});

CodePudding user response：

After first click, your type of input changed from password to text
And when you click second time, script trying to find the input type password .find('input[type=password]') that doesn't exist after first click

So, for my opinion it would be good to add a class to the password input (.password-input for example), and work with that
should look something like that

$('#toggle_pw_vis').click(function () {
    $('.password-input').attr('type', $(this).is(':checked') ? 'text' : 'password');
});