Salah satu hal yang tidak kita sukai kalau kita sedang berhadapan dengan elemen formulir yaitu elemen checkbox dan radio. Tampilan mereka tidak gampang dimodifikasi dengan CSS. Oleh alasannya yaitu itu kita harus memakai elemen lain sebagai pengganti. Sedangkan elemen checkbox yang orisinil akan disembunyikan. Meskipun, intinya kita akan tetap mengambil perilaku checked ataupun unchecked dari elemen tersebut.
Pada dasarnya kita hanya akan menambahkan elemen sisipan yang sanggup diatur tampilannya dengan CSS. Kurang lebihnya menyerupai ini:
<a class="checkbox" href="#">✔</a><input type="checkbox" />Kita akan membagi kiprah mereka berdua. Elemen a.checkbox akan bertugas sebagai elemen palsu yang akan kita buat seakan-akan menyerupai elemen checkbox, sedangkan elemen checkbox di sebelahnya hanya akan kita jadikan sebagai penyimpan perilaku checked atau unchecked, sementara wujudnya akan kita sembunyikan:
/* Buat tampilan elemen a.checkbox seakan-akan menyerupai 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 elemen checkbox yang orisinil */ input[type="checkbox"] {display:none;}Kita tidak perlu menyisipkan elemen a.checkbox satu per satu di samping semua elemen checkbox, yang perlu kita lakukan hanyalah menyeleksi semua elemen checkbox yang ada kemudian kita sisipkan elemen a.checkbox di sampingnya dengan jQuery .before():
$(':checkbox').each(function() { if($(this).is(':checked')) { $(this).before('<a href="#" class="checkbox checked">✔</a>'); } else { $(this).before('<a href="#" class="checkbox">✔</a>'); } });Di sini kita bukan hanya akan menyisipkan elemen pemanis sebagai hiasan saja, tapi kita juga harus membuatnya sanggup bekerja. Setidaknya, ketika elemen tautan tersebut diklik, maka beliau akan bekerja menyerupai halnya checkbox. Namun alasannya yaitu elemen ini bukan checkbox, maka yang sanggup kita lakukan hanyalah membuatnya berfungsi sebagai mediator dicentang atau tidaknya elemen checkbox orisinil di sampingnya. Kita sanggup membuat kiprah sedarhana menurut event klik. Saat elemen tersebut diklik, maka elemen tersebut akan mengeset atribut checked pada elemen checkbox di sampingnya, atau sebaliknya, akan menghapus atribut checked pada elemen 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 elemen a.checkbox diklik, dalam kondisi bahwa elemen checkbox di sampingnya sedang dicentang, tambahkan kelas checked pada diri sendiri dan hilangkan atribut checked pada elemen checkbox di sampingnya. Jika sebaliknya, tambahkan kelas checked pada diri sendiri dan set atribut checked="true" pada elemen checkbox di sampingnya.
Saya telah menunjukkan sedikit pemanis lagi mengenai elemen <label>, alasannya yaitu biasanya elemen tersebut juga dipakai sebagai pemicu checkbox, maka Saya mengeset elemen checkbox sebagai pemicu diri sendiri yang juga sanggup mempengaruhi elemen a.checkbox di sampingnya (untuk alasan yang tidak Saya ketahui, <label> tidak menunjukkan efek apapun kepada elemen checkbox ketika <label> diklik melalui peramban Opera):
Disarankan juga untuk menyembunyikan elemen checkbox dengan jQuery dibandingkan menuliskannya di dalam arahan CSS, sehingga ketika JavaScript tidak bekerja, elemen checkbox yang orisinil masih sanggup tampil dan bekerja sebagaimana mestinya:
$(':checkbox').each(function() { // Sisipkan elemen manipulasi sempurna sebelum checkbox if ($(this).is(":checked")) { // Jika checkbox terdeteksi sudah dicentang/dicek, // sisipkan elemen manipulasi dengan pemanis kelas 'checked' $(this).before('<a href="#" class="checkbox checked">✔</a>'); } else { // Jika sebaliknya, jangan sertakan kelas 'checked' $(this).before('<a href="#" class="checkbox">✔</a>'); } }).click(function() { // Bagian ini tidak terlalu penting, tapi kalau kita bekerjasama dengan <label>, mungkin ini dibutuhkan if ($(this).is(":checked")) { $(this).prev().addClass('checked'); } else { $(this).prev().removeClass('checked'); } }).hide(); // Sembunyikan elemen checkbox yang asliKode Lengkap
HTML
<input type="checkbox" />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 palsu ketika sedang aktif */ .checked { color:white; background-color:#226C9C; }jQuery
$(':checkbox').each(function() { // Sisipkan elemen manipulasi sempurna sebelum checkbox if ($(this).is(":checked")) { // Jika checkbox terdeteksi sudah dicek, // sisipkan elemen manipulasi dengan pemanis kelas 'checked' $(this).before('<a href="#" class="checkbox checked">✔</a>'); } else { // Jika sebaliknya, jangan sertakan kelas 'checked' $(this).before('<a href="#" class="checkbox">✔</a>'); } }).click(function() { // Bagian ini tidak terlalu penting, tapi kalau kita bekerjasama dengan <label>, mungkin ini dibutuhkan if ($(this).is(":checked")) { $(this).prev().addClass('checked'); } else { $(this).prev().removeClass('checked'); } }).hide(); // Sembunyikan elemen checkbox yang orisinil // Tugas checkbox dialihkan kepada elemen manipulasi // namun elemen tersebut hanya bertugas sebagai pemicu... // yang intinya akan tetap mempengaruhi elemen checkbox asli. // Saat elemen a.checker diklik... $('a.checkbox').click(function() { // Jika elemen sehabis a.checker sudah dicek... if ($(this).next().is(":checked")) { // Hilangkan kelas 'checked' pada diri sendiri dan hapus atribut checked pada elemen setelahnya // (Dalam hal ini yaitu checkbox) $(this).removeClass('checked').next().removeAttr('checked'); } else { // Jika sebaliknya, tambahkan kelas 'checked' pada diri sendiri dan set atribut checked pada elemen checkbox di sampingnya $(this).addClass('checked').next().attr('checked', 'true'); } return false; });