Cara Mencetak Multiple Nilai dari Checkbox dengan Javascript

Cara Mencetak Multiple Nilai dari Checkbox dengan Javascript - Dengan adanya javascript kita bisa dengan mudah memanipulasi DOM HTML selain itu dengan javascript kita juga bisa membuat proses sederhana berupa efek ataupun animasi untuk menunjang halaman website agar terlihat lebih menarik dan interaktif. Nah, pada kesempatan kali ini saya akan bagikan tutorial sederhana javascript yakni bagaimana Cara Mencetak Multiple Nilai dari Checkbox dengan Javascript tentu buat kalian yang lagi belajar javascript ini akan menjadi referensi pembelajaran javascript yang bagus. Penasaran bagaimana caranya ? Langsung saja simak langkah - langkah nya berikut ini.

Baik, kita mulai langkah pertama yaitu membuat beberapa elemen checkbox yang agar nanti bisa di cetak nilai nya sesuai dengan yang kita pilih dari nilai checkbox nya. Silahkan kalian bisa membuat elemen checkbox dengan kode HTML seperti berikut.

<body>
    <input type="checkbox" name="hobi" value="Membaca">Membaca <br>
    <input type="checkbox" name="hobi" value="Menulis">Menulis <br>
    <input type="checkbox" name="hobi" value="Menari">Menari <br>
    <input type="checkbox" name="hobi" value="Bernyanyi">Bernyanyi <br>
    <input type="checkbox" name="hobi" value="Olahraga">Olahraga <br>
    <button id="submit">Submit</button>
    <div id="demo"></div>
</body>

Langkah berikutnya setelah membuatkan beberapa elemen checkbox seperti diatas, barulah kita buatkan prosesnya, dimana ketikan kita pilih nilai dari checkbox nya baik nilai yang dipilih itu satu nilai maupun lebih dari satu (multiple) nilainya akan dicetak. Untuk proses ini tentu kita akan buat dengan kode Javascript seperti berikut.

<script>
    var btn = document.getElementById("submit");

    btn.onclick = function() {
        var checkbox = document.getElementsByTagName("input");
        var hobi = "";
        for(var i = 0; i < checkbox.length; i++){
            if(checkbox[i].checked){
                hobi = hobi + checkbox[i].value +", ";
            }
        }
        document.getElementById("demo").innerText = "Aku suka "+ hobi.replace(/,\s*$/, "");
    }
</script>

Langkah terakhir, setelah mengetikan semua kode HTML dan javascript diatas, silahkan simpan kembali filenya, kemudian kalian bisa melihat dan mencoba hasil akhirnya di browser masing - masing.

Baiklah, cukup sekian tutorial sederhana javascript tentang bagaimana Cara Mencetak Multiple Nilai dari Checkbox dengan Javascript, semoga tutorial ini bermanfaat dan sampai jumpa di tutorial DUMET School selanjutnya :)

28 Juli 2019

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat