Réécriture du javascript en ligne dans jQuery

Question

Comment réécrire ceci en utilisant jQuery au lieu de l'événement onchange?

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

Answer 1

Si ceci est votre balisage exacte, vous pouvez le faire. Notez également que cette mise à jour fonctionne réellement sur différents navigateurs. Étant donné que votre case n'a pas une carte d'identité, je me sers d'un sélecteur de frères et soeurs pour y accéder par son étiquette parent p:

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

Answer 2

Comme ceci:

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