function changeInputType(inputId, type) {
var input = $("#" + inputId);
$(input).replaceWith($("<input />").val(input.val()).attr("placeholder", input.attr("placeholder")).attr("id", inputId).attr("type", type));
}
$("#show-ps").change(function() {
if ($(this).attr("checked")) {
changeInputType("password", "text");
} else {
changeInputType("password", "password");
}
});
if ($("#show-ps").attr("checked")) {
changeInputType("password", "text");
}
form{margin:50px;}
<form class="login" action="foo">
<input id="username" type="text" placeholder="Name" />
<input id="password" type="password" placeholder="Password"/>
<input id="submit" type="submit" value="Login" />
<br />
<label for="show-ps"><input id="show-ps" type="checkbox" />Show your pass</label>
</form>