Changing password field to text with checkbox with jQuery

Question

How can I toggle a password field to text and password with a checkbox check uncheck?

Michel Gokan Khan · Accepted Answer · 2009-12-28T18:50:14.583

is this what you looking for ??

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

score 2 · Answer 2 · answered Dec 28 '09 at 18:21

Use the onChange event when ticking the checkbox and then toggle the input's type to text/password.

Example:

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

Anwar Chandra · Answer 3 · 2009-12-28T18:42:51.250

updated: live example here

changing type with $('#blahinput').attr('type','othertype') is not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements.

you need to remove text input and add password input, vice versa.

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

live example here

Update: I don't know for the time of the question, but your first code works if you try .prop('type') nowadays. — fredlegrain, Nov 05 '12 at 10:23

score 2 · Answer 4 · answered Apr 01 '14 at 02:38

You can use some thing like this

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

    });

visit here for more http://voidtricks.com/password-show-hide-checkbox-click/

score 0 · Answer 5 · answered Nov 05 '12 at 10:28

0

.attr('type') was blocked by jQuery team because it won't work with some versions of IE.

Consider using this code :

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

answered Nov 05 '12 at 10:28

fredlegrain

584
1
6
20

score 0 · Answer 6 · answered Dec 28 '09 at 18:23

0

I believe you can call

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

and

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

depending on the checkbox state.

answered Dec 28 '09 at 18:23

KingErroneous

989
1
8
16

not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements. not a jQuery bug – Anwar Chandra Dec 28 '09 at 18:44

Derek Illchuk · Answer 7 · 2009-12-28T18:38:44.970

I have the following in production. It clones a new field having the toggled type.

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 doesn't just let you take the type attribute and change it, at least not the last time I tried.

score 0 · Answer 8 · answered Dec 28 '09 at 18:26

Toggle the checkbox's focus event and determain the checkbox's status and update the field as 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');
        }
    })

score 0 · Answer 9 · answered Dec 28 '09 at 19:08

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

score 0 · Answer 10 · answered Jan 21 '14 at 17:54

This can be implemented much simpler:

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

Works for jQuery 1.6+

score 0 · Answer 11 · edited Nov 17 '12 at 03:42

0

oncheck

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

onuncheck

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

edited Nov 17 '12 at 03:42

Devin Burke

13,642
12
55
82

answered Mar 05 '12 at 08:37

gsoni

1,126
15
25

Changing password field to text with checkbox with jQuery

11 Answers11

Linked

Related