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="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.
$('#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.
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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
