Cara Memilih Gambar dengan Radio Button

Cara Memilih Gambar dengan Radio Button - Pada artikel kali ini saya akan bagikan tutorial tentang javascript yakni Cara Memilih Gambar dengan Radio Button. Tentu kita tahu bahwa javascript merupakan sebuah bahasa scripting yang bisa kita gunakan untuk membuat suatu halaman website terlihat dinamis, dan interaktif. Maka tidak heran javascript menjadi basaha yang sangat populer saat ini. Nah, berikut ini saya akan praktekan Cara Memilih Gambar dengan Radio Button dimana kita akan buatkan fungsinya dengan javscript. Langsung saja simak langkah - langkahnya berikut ini.

Langkah 1 : Cara Memilih Gambar dengan Radio Button

Langkah pertama silahkan kalian buat tampilan radio button untuk nanti dijadikan elemen utama untuk memilih gambarnya, pada kasus ini saya membuat tampilan button dengan framework bootstrap seperti berikut.

<div class="container">
    <div class="row mt-3 mb-2">
        <div class="col-md-5">
            <div class="card card-body">
                <div class="custom-control custom-radio">
                  <input type="radio" id="male" name="sex" value="male" class="custom-control-input">
                  <label class="custom-control-label" for="male">Laki - laki</label>
                </div>
                <div class="custom-control custom-radio">
                  <input type="radio" id="female" name="sex" value="female" class="custom-control-input">
                  <label class="custom-control-label" for="female">Perempuan</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                <div class="card-body" id="output">
                    <!-- Output -->
                </div>    
                <div class="card-footer" id="text">
                    <!-- Text -->
                </div>
            </div>
            
        </div>
    </div>
</div>

langkah 2 : Cara Memilih Gambar dengan Radio Button

Setelah membuat radio button, langkah selanjutnya adalah membuat fungsi agar ketika kita memilih radio berdasarkan namanya akan tampil satu buah gambar berdasarkan nama radio button yang dipilih, untuk itu silahkan kalian buat sintak javascriptnya seperti berikut.

<script>
    var _radio = document.querySelectorAll('input[type="radio"]');
    var _output = document.getElementById('output');
    var _text = document.getElementById('text');

    for(var i = 0; i < _radio.length; i++){
        _radio[i].onclick = function() {
            console.log(this.value)
            if ( this.value === "male" ) {
                _output.innerHTML = `<img src="male.png">`;
                _text.innerHTML = "I am <strong>Male</strong>";
            }
            if ( this.value === "female" ) {
                _output.innerHTML = `<img src="female.png">`;
                _text.innerHTML = "I am <strong>Female</strong>";
            }
        }
    }    
</script>

Setelah semua sintak telah kalian ketikan, silhakn simpan terlebih dahulu filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka hasilnya akan terlihat seperti berikut.

Cara Memilih Gambar dengan Radio Button

Bagaimana, menarik bukan ? Baiklah cukup sekian tutoria sederhana mengenai bagaimana Cara Memilih Gambar dengan Radio Button, semoga bermanfaat dan bisa membantu, selamat mencoba dan sampai jumpa pada tutorial selanjutnya.

 

6 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat