Bosan dengan tampilan checkbox yang begitu begitu saja ? Tampilannya pun berbeda-beda di tiap browser. Kita dapat mengubah bentuknya sesuai dengan yang di inginkan dengan bantuan salahsatu Javascript library yaitu JQuery.

MARKUP

Hanya input dengan tipe checkbox dan sebuah label untuk checkbox tersebut.

<input type="checkbox" id="check1">
<label for="check1">Checkbox 1</label>

CSS

Disini saya akan menggunakan progressive enhancement, jadi jika javascript tidak berjalan, checkbox masih dapat digunakan.

label {
    cursor:pointer
}

/* Sembunyikan checkbox jika javacript di browser aktif.
Jika javascript tidak aktif, checkbox akan dapat tetap digunakan
karena class custom diberikan oleh javascript */
input[type=checkbox].custom {
    display:none;
    margin:0
}

/* ini adalah rule untuk tombol yang akan dijadikan sebagai checkbox replacement */
.custom-checkbox {
    width:20px;
    height:20px;
    float:left;
    margin-right:5px;
    cursor:pointer;
    background:url(checkbox.png) no-repeat 0 -20px
}

/*Jika checkbox di cek, maka ubah posisi gambar */
.custom-checkbox.checked {
    background:url(checkbox.png) no-repeat 0 0
}

JAVASCRIPT

// Beri class custom pada checkbox
$(':checkbox').addClass('custom');

// Tambahkan element dengan classname custom-checkbox, dan masukkan
// setelah element checkbox
$('',{className:'custom-checkbox'}).insertAfter(':checkbox');

//Event klik untuk tombol custom-checkbox
$(".custom-checkbox").click(function(e){
    e.preventDefault();
    //jika checkbox telah di cek
    if( $(this).prev(':checkbox').attr('checked') ){
        $(this)
            .removeClass('checked')
            .prev(':checkbox').removeAttr('checked');
    }
    //jika checkbox belum di cek
    else {
        $(this)
            .addClass('checked')
            .prev(':checkbox').attr('checked','checked');
    }
});

Sampai sini, custom checkbox sudah dapat berfungsi. Tapi, bagaimana jika saat halaman di muat ada checkbox yang sudah di cek ? Begini solusinya

//Iterate setiap checkbox dengan class custom
$(":checkbox.custom").each(function(){
    //periksa apakah checkbox sudah di cek atau belum, jika sudah maka beri
    // class checked pada custom-checkbox
    if( $(this).attr('checked') ) {
        $(this).next('.custom-checkbox').addClass('checked');
    }
});

Sekarang checkbox akan membrikan class checked pada checkbox replacement jika checkbox sudah di cek. Lalu bagaimana jika user meng-klik label di sebelah checkbox? Tidak akan terjadi apa apa, untuk mengatasinya adalah dengan memindahkan attribute ID yang ada pada checkbox ke checkbox replacement.

//masih di dalam iterating
//pindahkan attribute id ke ke checkbox replacement
var id = $(this).attr('id');
$(this).removeAttr('id');
$(this).next('.custom-checkbox').attr('id',id);

Javascript keseluruhan akan seperti ini

// Beri class custom pada checkbox
$(':checkbox').addClass('custom');

// Tambahkan element dengan classname custom-checkbox, dan masukkan
// setelah element checkbox
$('',{className:'custom-checkbox'}).insertAfter(':checkbox');

//Event klik untuk tombol custom-checkbox
$(".custom-checkbox").click(function(e){
    e.preventDefault();
    //jika checkbox telah di cek
    if( $(this).prev(':checkbox').attr('checked') ){
        $(this)
            .removeClass('checked')
            .prev(':checkbox').removeAttr('checked');
    }
    //jika checkbox belum di cek
    else {
        $(this)
            .addClass('checked')
            .prev(':checkbox').attr('checked','checked');
    }
});
//Iterate setiap checkbox dengan class custom
$(":checkbox.custom").each(function(){
    //periksa apakah checkbox sudah di cek atau belum, jika sudah maka beri
    // class checked pada custom-checkbox
    if( $(this).attr('checked') ) {
        $(this).next('.custom-checkbox').addClass('checked');
    }

    //pindahkan attribute id ke ke checkbox replacement
    var id = $(this).attr('id');
    $(this).removeAttr('id');
    $(this).next('.custom-checkbox').attr('id',id);
});

Yup sekarang custom checkbox sudah selesai, teman teman dapat melihat demo atau download file source-nya. Mohon masukkannya jika teman teman punya trik yang lebih mudah.

---

Posted by Arif Widipratomo - http://arifwidi.co.vu/