Changing Password Field To Text With Checkbox With Jquery

August 29, 2023 Post a Comment

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

Solution 1:

is this what you looking for ??

<html><head><script>functionchangeType()
    {
        document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
    }
</script></head><body><formname="myform"><inputtype="text"name="txt" /><inputtype="checkbox"name="option"value='1'onchange="changeType()" /></form></body></html>

Solution 2:

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

Example:

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

Solution 3:

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

live example here

Solution 4:

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/

Solution 5:

I believe you can call

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

and

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

depending on the checkbox state.

JavaScript Guy