將內聯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'); 
});