Rewrite inline javascript into jQuery

Question

How do I rewrite this using jQuery instead of the onchange event?

<input name="PasswordName" type="password" id="passwordID">
<p>
<input type="checkbox" onchange="document.getElementById('passwordID').type = this.checked ? 'text' : 'password'"> Show Password
</p>

Make sure to test this in IE, since it won't allow you to do this, at least not as you have it, you'll have to remove/add an input element, the type is immutable in IE :) — Nick Craver
– Nick Craver, Commented May 17, 2010 at 16:36

SLaks · Accepted Answer · 2010-05-17 16:35:34Z

4

Like this:

$('#ID of CheckBox').change(function() {
    $('#passwordID').attr('type', this.checked ? 'text' : 'password');
});

answered May 17, 2010 at 16:35

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keith Rousseau Over a year ago

No need to get the underlying element - $('#passwordID').attr('type', ...)

scunliffe Over a year ago

As noted in the comments to the original question - this will NOT WORK in Internet Explorer since IE can't change the type attribute! bug: webbugtrack.blogspot.com/2007/09/…

Doug Neiner · Accepted Answer · 2010-05-17 17:25:10Z

3

If this is your exact markup, you can do this. Also note this is updated to actually work across different browsers. Since your checkbox does not currently have an id, I am using a sibling selector to access it through its parent p tag:

jQuery(function($){ // DOM Ready

  $("#passwordID + p input").click(function(){
     var new_type = $(this).is(':checked') ? "text" : "password",
         pwd      = $("#passwordID"); // We keep replacing it, so find it again
     if(pwd.attr('type') !== new_type){
       pwd.replaceWith( 
          $("<input />", {type: new_type, value: pwd.val(), id: "passwordID", name: "PasswordName"})
       );
     }
  }).click(); // Trigger it once on load in case browser has remembered the setting

});

Demo on JSBin

edited May 17, 2010 at 17:25

answered May 17, 2010 at 16:55

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

5 Comments

Phillip Senn Over a year ago

Zounds! I'm glad that I asked!

scunliffe Over a year ago

I tried this in IE8 on JSBin - it will show the value, but not hide it again.

Phillip Senn Over a year ago

What is !==? I know about == and !=, but !==?

Phillip Senn Over a year ago

id: "#passwordID" should be id: "passwordID"

Doug Neiner Over a year ago

@scunliffe and @cf_PhillipSenn, I updated the post to fix the ID problem. Sorry about that! @cf_PhillipSen !== is a strict not equals (no type conversion). === is strict equals. 0 != "0" => false whereas 0 !== "0" => true. Anywhere where you know for sure the types should match, you should use === or !==.

Collectives™ on Stack Overflow

Rewrite inline javascript into jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related