Salah satu hal yang tidak kita sukai jika kita sedang berhadapan dengan elemen formulir adalah elemen checkbox dan radio. Tampilan mereka tidak mudah dimodifikasi dengan CSS. Oleh karena itu kita harus menggunakan elemen lain sebagai pengganti. Sedangkan elemen checkbox yang asli akan disembunyikan.
Meskipun, pada dasarnya kita akan tetap mengambil sikap checked ataupun unchecked dari elemen tersebut.
Pada dasarnya kita hanya akan menambahkan elemen sisipan yang bisa diatur tampilannya dengan CSS. Kurang lebihnya seperti ini:
<a class="checkbox" href="#">✔</a><input type="checkbox" />Kita akan membagi tugas mereka berdua. Elemen a.checkbox akan bertugas sebagai elemen palsu yang akan kita buat seolah-olah seperti elemen checkbox, sedangkan elemen checkbox di sebelahnya hanya akan kita jadikan sebagai penyimpan sikap checked atau unchecked, sementara wujudnya akan kita sembunyikan:
/* Buat tampilan elemen a.checkbox seolah-olah seperti 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 asli */
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 tambahan sebagai hiasan saja, tapi kita juga harus membuatnya bisa bekerja. Setidaknya, saat elemen tautan tersebut diklik, maka dia akan bekerja seperti halnya checkbox. Namun karena elemen ini bukan checkbox, maka yang bisa kita lakukan hanyalah membuatnya berfungsi sebagai perantara dicentang atau tidaknya elemen checkbox asli di sampingnya.
Kita bisa menciptakan tugas sedarhana berdasarkan 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 memberikan sedikit tambahan lagi mengenai elemen <label>, karena biasanya elemen tersebut juga digunakan sebagai pemicu checkbox, maka Saya mengeset elemen checkbox sebagai pemicu diri sendiri yang juga dapat mempengaruhi elemen a.checkbox di sampingnya (untuk alasan yang tidak Saya ketahui, <label> tidak memberikan imbas apapun kepada elemen checkbox saat <label> diklik melalui peramban Opera):
Disarankan juga untuk menyembunyikan elemen checkbox dengan JQuery dibandingkan menuliskannya di dalam kode CSS, sehingga saat JavaScript tidak bekerja, elemen checkbox yang asli masih bisa tampil dan bekerja sebagaimana mestinya:
$(':checkbox').each(function() {
// Sisipkan elemen manipulasi tepat sebelum checkbox
if ($(this).is(":checked")) {
// Jika checkbox terdeteksi sudah dicentang/dicek,
// sisipkan elemen manipulasi dengan tambahan 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 jika kita berhubungan dengan <label>, mungkin ini diperlukan
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 saat 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 tambahan 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 jika kita berhubungan dengan <label>, mungkin ini diperlukan
if ($(this).is(":checked")) {
$(this).prev().addClass('checked');
} else {
$(this).prev().removeClass('checked');
}
}).hide(); // Sembunyikan elemen checkbox yang asli
// Tugas checkbox dialihkan kepada elemen manipulasi
// namun elemen tersebut hanya bertugas sebagai pemicu...
// yang pada dasarnya akan tetap mempengaruhi elemen checkbox asli.
// Saat elemen a.checker diklik...
$('a.checkbox').click(function() {
// Jika elemen setelah 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 adalah 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;
});
0 komentar:
Posting Komentar