Cara Mencetak Multiple Nilai dari Checkbox dengan Javascript

28/07/2019    Risman Hakim    135     Website

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 :)

Javascript

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More