Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery

Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery

HobbyTekno - Pada postingan kali ini Admin akan membahas cara Membuat Tombol Show Password menggunakan jQuery. Tombol ini sudah umum kita temukan pada Website-website besar contohnya Facebook, dan lain sebagainya. Event yang akan kita gunakan adalah attr, yaitu mengubah attribut elemen yang kita seleksi nantinya. Langsung saja berikut langkah-langkahnya.

Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery


1. Pastikan File jQuery ada dalam Folder Project anda atau gunakan CDN jQuery secara online.

2. Buat file .html, Buat Form Login seperti kode berikut. Kali ini saya akan menggunakan CDN Bootstrap juga (online)
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery</title>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <h3>Form Login</h3>
            <form action="">
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" class="form-control" id="password">
                </div>
                <input type="checkbox" id="checkbox"> Show Password
                <hr>
                <button class="btn btn-primary w-100">Login</button>
            </form>
        </div>
    </div>
</body>
</html>
3. Buat file dengan nama style.css, ketik kode seperti berikut ini.
.card {
    border-radius: 12px;
    border: 2px solid #eee;
    margin: auto;
    margin-top: 120px;
    padding: 50px;
    width: 450px;
}
4. Buat file dengan nama script.js, ketik kode seperti berikut
$(document).ready(function () {
    $('#checkbox').click(function () {
        if ($(this).is(':checked')) {
            $('#password').attr('type', 'text');
        } else {
            $('#password').attr('type', 'password');
        }
    })
})
Penjelasan : Pada saat input dengan id "#checkbox" di klik, lalu cek apakah #checkbox dalam keadaaan dicentang atau tidak, jika iya maka ubah attribut #password menjadi text. jika tidak maka ubah attribut #password menjadi password. Jika anda belum mengerti silahkan baca artikel Tutorial jQuery sebelumya di HobbyTekno.

5. Coba masukkan username dan password, lalu cek dengan cara mencentang / klik pada checkbox disamping Show Password.

Hasilnya akan jadi seperti berikut

Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery

Sekian Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #8 - Membuat Tombol Show Password menggunakan jQuery"