将内联javascript重写为jQuery

Question

如何使用jQuery而不是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

如果这是你确切的标记，你可以做到这一点。还要注意，这个更新实际上可以在不同的浏览器上工作。由于您的复选框，目前没有一个ID，我使用的是兄弟选择通过其父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

像这样：

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