Cara Membuat Multiple Select Checkbox dengan jQuery

Cara Membuat Multiple Select Checkbox dengan jQuery - Ada banyak fitur yang bisa kita buat untuk suatu inputan, jika pada tutorial sebelumnya saya membahas bagaiman Cara Membuat Fitur Inputan Only Number, kali ini saya akan melanjutkan lagi pembahasannya mengenai bagaimana Cara Membuat Multiple Select Checkbox dengan jQuery yang tentunya tidak kalah menarik. Fitur ini lumayan membantu sekali jika dikembangkan lagi dimana kita bisa memilih samua item dengan mencentang chekcbox atau memilih satu persatu. Nah, berikut akan saya praktekan bagaimana cara membuatnya. Simak langkah - langkah nya berikut ini.

langkah 1 : Cara Membuat Multiple Select Checkbox dengan jQuery

Pada kasus yang saya buat kali ini, saya memanfaatkan framework Bootstrap sebagai layout dan desain checkboxnya, untuk itu silahkan kalian buat struktur sederhana untuk membuat checkbok seperti berikut ini.

<div class="container mt-3">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-dark">
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="check-all">
                      <label class="custom-control-label text-warning" for="check-all">Check All Items</label>
                    </div>
                </div>
                <div class="card-body">
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="Check1">
                      <label class="custom-control-label" for="Check1">Javascript</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="Check2">
                      <label class="custom-control-label" for="Check2">React</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="Check3">
                      <label class="custom-control-label" for="Check3">Vue</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="Check4">
                      <label class="custom-control-label" for="Check4">Laravel</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

langkah 2 : Cara Membuat Multiple Select Checkbox dengan jQuery

Langkah selanjutnya setelah membuat checkbox seperti diatas, kita akan membuat fungsi untuk multiple checkboxnya dan kita akan memanfaatkan fungsi dari jQuery seperti berikut ini.

<script>
    $('#check-all').click(function () {
        $('input[type=checkbox]').not(":disabled").prop('checked', this.checked);
    });
</script>

Setelah semua sintak telah diketikan, pastikan filenya telah tersimpan kemudian silahkan kalian jalankan pada browser masing -  masing dan lihat hasilnya. Maka akan terlihat tampilan seperti berikut, jika kalian ingin memilih semua item maka kalian tinggal centang checkbox yang paling atas.

Cara Membuat Multiple Select Checkbox dengan jQuery

Baiklah cukup sekian tutorial mengenai bagaimana Cara Membuat Multiple Select Checkbox dengan jQuery, semoga tutorial ini bisa membantu dan bermanfaat selamat mencoba dan sampai jumpa pada tutorial selanjutnya :)

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