Judul : Jquery Custom Checkbox
link : Jquery Custom Checkbox
Jquery Custom Checkbox
Salah satu hal yang tidak kita senangi bila kita sedang berhadapan dengan komponen formulir yaitu komponen checkbox dan radio. Tampilan mereka tidak mudah dimodifikasi dengan CSS. Oleh alasannya yaitu itu kita mesti menggunakan komponen lain selaku pengganti. Sedangkan elemen checkbox yang orisinil akan disembunyikan. Meskipun, intinya kita akan tetap mengambil perilaku checked ataupun unchecked dari unsur tersebut.
Pada dasarnya kita cuma akan menambahkan komponen sisipan yang sanggup dikelola tampilannya dengan CSS. Kurang lebihnya ibarat ini:
✔Kita akan membagi peran mereka berdua. Elemen a.checkbox akan bertugas sebagai elemen artifisial yang mau kita buat seakan-akan menyerupai komponen checkbox, sedangkan elemen checkbox di sebelahnya hanya akan kita jadikan selaku penyimpan perilaku checked atau unchecked, sementara wujudnya akan kita sembunyikan:
/* Buat tampilan bagian a.checkbox seakan-akan ibarat elemen checkbox */ a.checkbox display:inline-block; vertical-align:middle; width:20px; line-height:20px; text-align:center; background-color:#aaa; color:white; border:2px solid #333; margin:0px 10px 0px 0px; /* Sembunyikan unsur checkbox yang orisinil */ input[type="checkbox"] display:none;Kita tidak perlu menyisipkan bagian a.checkbox satu per satu di samping semua unsur checkbox, yang perlu kita lakukan hanyalah memilih semua unsur checkbox yang ada kemudian kita sisipkan bagian a.checkbox di sampingnya dengan jQuery .before():
$(':checkbox').each(function() if($(this).is(':checked')) $(this).before('✔'); else $(this).before('✔'); );Di sini kita bukan cuma akan menyisipkan unsur pelengkap selaku hiasan saja, tetapi kita juga mesti menjadikannya mampu melakukan pekerjaan . Setidaknya, saat unsur tautan tersebut diklik, maka dia akan bekerja ibarat halnya checkbox. Namun alasannya adalah yaitu elemen ini bukan checkbox, maka yang sanggup kita kerjakan hanyalah membuatnya berfungsi selaku mediator dicentang atau tidaknya komponen checkbox asli di sampingnya. Kita mampu menciptakan kiprah sedarhana berdasarkan event klik. Saat komponen tersebut diklik, maka elemen tersebut akan mengeset atribut checked pada unsur checkbox di sampingnya, atau sebaliknya, akan menghapus atribut checked pada unsur checkbox di sampingnya:
$('a.checkbox').click(function() if($(this).next().is(':checked')) $(this).addClass('checked').next().removeAttr('checked'); else $(this).removeClass('checked').next().attr('checked', 'true'); );Saat bagian a.checkbox diklik, dalam kondisi bahwa komponen checkbox di sampingnya sedang dicentang, tambahkan kelas checked pada diri sendiri dan hilangkan atribut checked pada komponen checkbox di sampingnya. Jika sebaliknya, tambahkan kelas checked pada diri sendiri dan set atribut checked="true" pada bagian checkbox di sampingnya.
Saya telah memberikan sedikit aksesori lagi mengenai komponen , alasannya adalah yakni lazimnya elemen tersebut juga dipakai sebagai pemicu checkbox, maka Saya mengeset elemen checkbox sebagai pemicu diri sendiri yang juga mampu mempengaruhi bagian a.checkbox di sampingnya (untuk alasan yang tidak Saya ketahui, tidak menawarkan imbas apapun kepada elemen checkbox dikala diklik melalui peramban Opera):
Disarankan juga untuk menyembunyikan komponen checkbox dengan jQuery dibandingkan menuliskannya di dalam aba-aba CSS, sehingga ketika JavaScript tidak melakukan pekerjaan , bagian checkbox yang asli masih mampu tampil dan bekerja sebagaimana mestinya:
$(':checkbox').each(function() // Sisipkan komponen manipulasi sempurna sebelum checkbox if ($(this).is(":checked")) // Jika checkbox terdeteksi sudah dicentang/dicek, // sisipkan elemen manipulasi dengan pemanis kelas 'checked' $(this).before('✔'); else // Jika sebaliknya, jangan sertakan kelas 'checked' $(this).before('✔'); ).click(function() // Bagian ini tidak terlampau penting, tapi bila kita berafiliasi dengan Kode Lengkap
HTML
CSS
.checkbox display:inline-block; vertical-align:middle; width:20px; line-height:20px; text-align:center; background-color:#aaa; color:transparent; overflow:hidden; text-decoration:none; border:2px solid #333; margin:0px 10px 0px 0px; /* Tampilan checkbox artifisial dikala sedang aktif */ .checked color:white; background-color:#226C9C; jQuery
$(':checkbox').each(function() // Sisipkan elemen manipulasi tepat sebelum checkbox if ($(this).is(":checked")) // Jika checkbox terdeteksi sudah dicek, // sisipkan elemen manipulasi dengan pemanis kelas 'checked' $(this).before('✔'); else // Jika sebaliknya, jangan sertakan kelas 'checked' $(this).before('✔'); ).click(function() // Bagian ini tidak terlalu penting, tetapi kalau kita bekerjasama dengan