Cara Membuat Multiple Select Checkbox dengan jQuery
01/08/2018 Risman Hakim 3727 Website
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 :)
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
