Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Check Uncheck Semua Checkbox menggunakan jQuery. Dalam tutorial ini, kita akan melihat bagaimana cara memeriksa atau menghapus centang pada kotak centang menggunakan jQuery. Kita dapat menggunakan fitur ini dalam berbagai keperluan seperti memilih beberapa catatan untuk melakukan pembaruan atau menghapus database. Dalam tutorial ini kita memiliki contoh sederhana dengan kode kurang untuk mendapatkan fitur ini menggunakan jQuery.
Form untuk list Kotak Checkbox
Berikut ini saya telah lampirkan form yang akan kita gunakan untuk membuat kotak checkbox. Grup kotak Checkbox ini menampilkan daftar bahasa sebagai bahan untuk kita percobaan.
|
1 2 3 4 5 6 7 8 |
<div id="divCheckAll"> <input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div> <div id="divCheckboxList"> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div> </div> |
Skrip jQuery untuk Memeriksa atau Hapus centang
Form di atas akan memicu fungsi jQuery pada saat mengklik kotak centang header di sebelah label Periksa Semua. Fungsi jQuery akan memeriksa apakah kotak centang header dicentang atau tidak dicentang. Berdasarkan status kotak centang header tersebut, skrip jQuery akan beralih ke grup item kotak centang dan mengubah statusnya. Berikut script jquery,
|
1 2 3 4 5 6 7 8 9 10 11 |
function check_uncheck_checkbox(isChecked) { if(isChecked) { $('input[name="language"]').each(function() { this.checked = true; }); } else { $('input[name="language"]').each(function() { this.checked = false; }); } } |
Dari script – script kita di atas tadi akan menghasilkan contoh seperti screenshot di bawah ini;
Gambar di atas menunjukan misalkan kita memilih satu list, dan saya juga menyediakan menu untuk membuat all check dan uncheck seperti contoh di bawah ini,
Oke itulah tadi pembahasan saya tentang Cara Membuat Check Uncheck Semua Checkbox menggunakan jQuery, semoga bermanfaat.