使用复选框切换密码输入（由于安全风险而无法使用）

Question

我正在尝试取消注册表单中的“再次输入密码以确认密码”字段。 我见过的设计模式是一个复选框，该复选框将向用户显示密码-以便他们可以进行验证。 但是，实施它似乎很痛苦。

这是我相关的html：

          <form name="signup">
            <div class="form-group">
              <input id="usernameInput" class="form-control" placeholder="username">
            </div>
            <div class="form-group">
              <input type="email" id="emailInput" class="form-control" placeholder="email">
            </div>
            <div class="form-group">
              <input type="password" name="passwordInput" class="form-control" placeholder="password">
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
              </label>
            </div>
            <button type="submit" class="btn btn-info btn-lg">Sign Up</button>
            <a href="#" class="btn btn-primary btn-lg owl-next" role="button">Back</a>
          </form>

以及随附的javascript：

function showPass() {
          document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
      }

但是，当我在firefox中尝试时，出现以下控制台错误：

Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.

该错误有点神秘，因为问题不在于非https网站上的密码字段（我之前曾使用过）。 我在这里想念什么吗？

Answer 1

如果您曾经听说过jQuery使用它，它将变得更加容易

$('#id-of-checkbox').change(function(){
 if($(this).is(':checked')){
  $('.password-fields').attr('type','text');
} else {
 $('.password-fields').attr('type','password');
}
});