JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<p>
    <input type="password" id="js-password" class="password" />
</p>

<p>
    <label for="js-passcheck">パスワードを表示する</label>
    <input type="checkbox" id="js-passcheck"/>
</p>

CSS

.password {
    font-size: 20px;
    padding: 12px;
    border: 1px solid #000000;
    border-radius: 3px;
}

JavaScript

$(function() {
    var password  = '#js-password';
    var passcheck = '#js-passcheck';
	
    changeInputtype(password, passcheck);
});


function changeInputtype(password, passcheck) {
    $(passcheck).change(function() {       
        if ($(this).prop('checked')) {
            $(password).attr('type','text');
        } else {
            $(password).attr('type','password');
        }
    });
}