Как сделать кнопку 'показать пароль' в двух полях?

Question

[XenTerSeO]

Есть шаблон:

<div class="current_password">
  <span class="icon_current_password">
    <i class="fa fa-lock"></i>
  </span>
  <input autocomplete="off" class="form_current_password" type="password" id="inputCurrentPassword" value="">
</div>

<div class="new_password">
  <span class="icon_new_password">
    <i class="fa fa-key"></i>
  </span>
  <input class="form_new_password" type="password" id="inputNewPassword" value="">
    <label for="show_pass" class="input-group-addon">
      <label class="pointer" for="show_pass">
        <i class="fa fa-eye"></i>
      </label>
      <input type="checkbox" id="show_pass">
    </label>
</div>

И есть скрипт:

<script>
(function ($) {
    $.toggleShowPassword = function (options) {
        var settings = $.extend({
            field: "#password",
            control: "#toggle_show_password",
        }, options);

        var control = $(settings.control);
        var field = $(settings.field)

        control.bind('click', function () {
            if (control.is(':checked')) {
                field.attr('type', 'text');
            } else {
                field.attr('type', 'password');
            }
        })
    };
}(jQuery));

$.toggleShowPassword({
    field: '#inputNewPassword',
    control: '#show_pass'
});
</script>

В поле .new_password имеется кнопка, при нажатии на которую будет показан пароль.
Как сделать подобную кнопку и в поле .current_password?

Answer 1

[petyagrill]

Учитывая Ваш код, нужно добавить еще один чекбокс, задать ему id и для него вызвать функцию "toggleShowPassword"

Пример решения