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>