使用帶有jQuery的復選框將密碼字段更改為文本

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

更新：這里的實例

改變類型與$('#blahinput').attr('type','othertype')在IE中是不可能的，考慮到IE對輸入元素的type屬性的only-set-it-once規則。

您需要刪除文本輸入並添加密碼輸入，反之亦然。

$(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 );
    }
  });
})

這里的實例

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

.attr（'type'）被jQuery團隊阻止，因為它不適用於某些版本的IE。

考慮使用此代碼：

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

Answer 6

我相信你可以打電話

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

和

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

取決於復選框狀態。

Answer 7

我在制作中有以下內容。 它克隆具有切換類型的新字段。

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 8

切換復選框的焦點事件並確定復選框的狀態並將該字段更新為nesscarry

$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 9

<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 10

這可以更簡單地實現：

<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+

Answer 11

的oncheck

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

onuncheck

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

使用帶有jQuery的復選框將密碼字段更改為文本

問題描述

11 個解決方案

解決方案1
8 已采納 2009-12-28 18:45:14

解決方案2
2 2009-12-28 18:33:33

解決方案3
1 2009-12-28 18:21:56

解決方案4
1 2014-04-01 02:38:45

解決方案5
0 2012-11-05 10:28:20

解決方案6
0 2009-12-28 18:23:16

解決方案7
0 2009-12-28 18:24:39

解決方案8
0 2009-12-28 18:26:09

解決方案9
0 2009-12-28 19:08:03

解決方案10
0 2014-01-21 17:54:46

解決方案11
0 2012-03-05 08:37:03

使用帶有jQuery的復選框將密碼字段更改為文本

問題描述

11 個解決方案

解決方案1 8 已采納 2009-12-28 18:45:14

解決方案2 2 2009-12-28 18:33:33

解決方案3 1 2009-12-28 18:21:56

解決方案4 1 2014-04-01 02:38:45

解決方案5 0 2012-11-05 10:28:20

解決方案6 0 2009-12-28 18:23:16

解決方案7 0 2009-12-28 18:24:39

解決方案8 0 2009-12-28 18:26:09

解決方案9 0 2009-12-28 19:08:03

解決方案10 0 2014-01-21 17:54:46

解決方案11 0 2012-03-05 08:37:03

解決方案1
8 已采納 2009-12-28 18:45:14

解決方案2
2 2009-12-28 18:33:33

解決方案3
1 2009-12-28 18:21:56

解決方案4
1 2014-04-01 02:38:45

解決方案5
0 2012-11-05 10:28:20

解決方案6
0 2009-12-28 18:23:16

解決方案7
0 2009-12-28 18:24:39

解決方案8
0 2009-12-28 18:26:09

解決方案9
0 2009-12-28 19:08:03

解決方案10
0 2014-01-21 17:54:46

解決方案11
0 2012-03-05 08:37:03