Question

如何通过取消选中复选框来切换密码字段为文本和密码？

Answer 1

这就是你要找的东西吗？

<html>
<head>
<script>
    function changeType()
    {
        document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
    }
</script>
</head>

<body>
    <form name="myform">
       <input type="text" name="txt" />
       <input type="checkbox" name="option" value='1' onchange="changeType()" />
    </form>
</body>
</html>

Answer 2

已更新：实例here

考虑到IE对输入元素的type属性的only-set-it-once规则，

在IE中无法使用$('#blahinput').attr('type','othertype')更改类型。

您需要删除文本输入并添加密码输入，反之亦然。

$(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{ // vice versa
      var pswd = $("#txtpassword").val();
      $("#txtpassword").attr("id","txtpassword2");
      $("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
      $("#txtpassword2").remove();
      $("#txtpassword").val( pswd );
    }
  });
})

直播示例here

Answer 3

单击复选框时使用onChange事件，然后将输入类型切换为文本/密码。

示例：

<input type="checkbox"  onchange="tick(this)" />
<input type="input" type="text" id="input" />
<script>
function tick(el) {
 $('#input').attr('type',el.checked ? 'text' : 'password');
}
</script>

Answer 4

你可以使用这样的东西

$("#showHide").click(function () {
                if ($(".password").attr("type")=="password") {
                    $(".password").attr("type", "text");
                }
                else{
                    $(".password").attr("type", "password");
                }

    });

访问此处以获取更多http://voidtricks.com/password-show-hide-checkbox-click/

Answer 5

我相信你可以打电话

$('#inputField').attr('type','text');

和

$('#inputField').attr('type','password');

取决于复选框状态。

Answer 6

我在制作中有以下内容。它克隆了一个具有切换类型的新字段。

toggle_clear_password = function( fields ) {

  // handles a list of fields, or just one of course
  fields.each(function(){
    var orig_field = $(this);
    var new_field =  $(document.createElement('input')).attr({
      name:  orig_field.attr('name'),
      id:    orig_field.attr('id'),
      value: orig_field.val(),
      type:  (orig_field.attr('type') == 'text'? 'password' : 'text')
    })
    new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin
    orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour
    orig_field.before(new_field);
    orig_field.remove();
  });
}

JQuery不只是让你获取type属性并进行更改，至少不是我最后一次尝试。

Answer 7

切换复选框的焦点事件并确定复选框状态并根据需要更新字段

$box = $('input[name=checkboxName]');

    $box.focus(function(){
        if ($(this).is(':checked')) {
            $('input[name=PasswordInput]').attr('type', 'password');    
        } else {
            $('input[name=PasswordInput]').attr('type', 'text');
        }
    })

Answer 8

<html>
<head>
<script>
    $(function(){
       $("#changePass").click(function(){
          if ($("#txttext").hasClass("hide")){
              $("#txttext").val( $("#txtpass").val() ).removeClass("hide");
              $("#txtpass").addClass("hide");
          } else if ($("#txtpass").hasClass("hide")){
              $("#txtpass").val( $("#txttext").val() ).removeClass("hide");
              $("#txttext").addClass("hide");
          }
       });
    });
</script>
<style>
  .hide{display:none;}
</style>
</head>
<body>
    <form id="myform">
       <input type="text" id="txtpass" type='password'/>
       <input class="hide" type="text" id="txttext" type='text'/>
       <button id="changePass">change</button>
    </form>
</body>
</html>

Answer 9

的oncheck

$('#password').get(0).type = 'text';

onuncheck

$('#password').get(0).type = 'password';

Answer 10

.attr（'type'）被jQuery团队阻止，因为它不适用于某些版本的IE。

考虑使用此代码：

$('#inputField').prop('type','text');
$('#inputField').prop('type','password');

Answer 11

这可以更简单地实现：

<form name="myform">
   <input type="password" name="password" />
   <input type="checkbox" name="showPassword" onchange="togglePasswordVisibility()" />
</form>

<script>
    function togglePasswordVisibility() {
        $('#password').attr('type',  $('#showPassword').prop('checked') ? 'text' : 'password');
    }
</script>

适用于jQuery 1.6 +

使用带有jQuery的复选框将密码字段更改为文本

11 个答案: