パスワードの表示/非表示をチェックボックスでスイッチできるようにする

Result

jQuery

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() {
    //チェックされてるときはtextを適応する
    if ($(this).attr("checked")) {
        changeInputType("password", "text");
    } else {
        changeInputType("password", "password");
    }
});

if ($("#show-ps").attr("checked")) {
    changeInputType("password", "text");
}​

html

<form class="login" action="foo">
        <input id="username" type="text" placeholder="ユーザー名" />
        <input id="password" type="password"  placeholder="パスワード"/>
        <input id="submit" type="submit" value="ログイン" />
        <br />
        <input id="show-ps" type="checkbox" /><label for="show-ps">パスワードを表示</label>
    </form>​

via

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

jsbin.com