使用单个复选框切换多个密码输入答案

【问题标题】：Toggle multiple password inputs with single checkbox使用单个复选框切换多个密码输入
【发布时间】：2013-01-26 18:49:41
【问题描述】：

好的，我想做的是用一个复选框切换 3 个密码输入框...单击复选框时，我希望在输入框中显示所有 3 个密码。有没有办法适应这个？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/opafo3/1/edit
-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>

<style id="jsbin-css">

</style>
</head>
<body>
  <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
  <p><input id="txtpassword" type="password" /></p>
<script>
$(function(){
  $("#show").click(function(){
    if( $("#show:checked").length > 0 ){
      var pswd = $("#txtpassword").val();
      $("#txtpassword").attr("id","txtpassword2");
      $("#txtpassword2").after( $("<input id='txtpassword' type='text'>") );
      $("#txtpassword2").remove();
      $("#txtpassword").val( pswd );
    }
    else{
      var pswd = $("#txtpassword").val();
      $("#txtpassword").attr("id","txtpassword2");
      $("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
      $("#txtpassword2").remove();
      $("#txtpassword").val( pswd );
    }
  });
})
</script>



</body>
</html>

我尝试了几件事，但无济于事。

【问题讨论】：

标签： html css forms checkbox radio-button

【解决方案1】：

我遇到了同样的问题，写了一个简单的 jQuery 插件来处理它并将它发布到github。

在您的情况下，用法类似于：

<input type="password" id="inputGroup1">
<input type="password" id="inputGroup2">
<label>
  <input type="checkbox" class="input-mask" data-toggle='["inputGroup1", "inputGroup2"]'>Toggle Password
</label>
<script>
$('.input-mask').passwordToggle();
</script>

【讨论】：

【解决方案2】：

令人惊讶的是，您无法通过互联网获得这些信息。但是，是的，这是使用 Jquery 1.9.1 的代码

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#show").bind("click",function(){
                    $(".txtPassword").each(function(e){
                        if($($(".txtPassword")[e]).attr("type")=="password"){
                            $($(".txtPassword")[e]).attr("type","text");
                        }
                        else if($($(".txtPassword")[e]).attr("type")=="text"){
                            $($(".txtPassword")[e]).attr("type","password");
                        }
                    })
                })

            });
        </script>
    </head>
    <body>
        <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
    </body>
</html>

将密码的 id 更改为 class。此代码可以处理所有类型为 txtpassword 的密码/文本类型的元素

【讨论】：