Check all / tandai semua dan uncheck all hilangkan semua tanda pada checkbox menggunakan jquery. Dalam tutorial jquery ini, saya akan membahas cara membuat check all dan uncheck all pada checkbox menggunakan jquery.
Dengan memberikan fasilitas check all dan uncheck all pada checkbox yang anda buat maka hal tersebut dapat memudahkan daripada harus menandai checkbox satu persatu, jika ada 100 data yang mau dipilih gimana? Tentunya akan sangat merepotkan dan memakan banyak waktu.
Pertama kita buat dulu checkboxnya
<div style="width:200px"> <input type="checkbox" id="check-all"> <label for="check-all">Check/Uncheck All</label><hr> <input type="checkbox" id="check1" class="checkbox" value="a"> Check 1<br> <input type="checkbox" id="check2" class="checkbox"> Check 2<br> <input type="checkbox" id="check3" class="checkbox"> Check 3<br> <input type="checkbox" id="check4" class="checkbox"> Check 4 </div>
Pada contoh diatas, terdapat sebuah checkbox untuk menandai dan atau menghilangkan tanda pada checkbox yaitu checkbox pertama dengan id check-all. Checkbox inilah yang akan menjadi acuan pada checkbox lain yang dibawahnya. Jika checkbox ini terpilih maka semua checkbox lain akan ikut terpilih dan begitupun sebaliknya.
Selanjutnya mari kita buat kode jquerynya
Perhatikan script jquery berikut ini:
$(function(){ //Sama jika menggunakan $(document).ready(function(){
$("#check-all").click(function(){
if ( (this).checked == true ){
$('.checkbox').prop('checked', true);
} else {
$('.checkbox').prop('checked', false);
}
});
});
Dalam script diatas, kita membuat sebuah event click pada checkbox dengan selector id yaitu check-all. Kemudian kita buat statement ( if ( (this).checked == true ){ ) yang artinya jika checkbox yang kita klik (check-all) bernilai true atau dalam kondisi terpilih maka seluruh checkbox dengan class=’checkbox’ akan ikut terpilih. Dalam pemilihan checkbox secara otomatis saya menggunakan jquery prop(), anda dapat melihat dokumentasinya di sini.
Cukup mudah bukan, checkbox seperti ini juga ditrapkan oleh google mail atau gmail. Dan kemudian bagaimana cara untuk mendapatkan nilai dari checkbox yang terpilih, saya akan bahas pada tutorial selanjutnya ( untuk melakukannya Gunakan fungsi jquery each() ). Jika tutorial ini cukup membantu tolong share ke yang lain.
