Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

jQuery Custom Checkbox

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="#">&#10004;</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">&#10004;</a>');
    } else {
        $(this).before('<a href="#" class="checkbox">&#10004;</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):

Mengecek Checkbox melalui Elemen Label

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">&#10004;</a>');
    } else {
        // Jika sebaliknya, jangan sertakan kelas 'checked'
        $(this).before('<a href="#" class="checkbox">&#10004;</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

Kode 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">&#10004;</a>');
    } else {
        // Jika sebaliknya, jangan sertakan kelas 'checked'
        $(this).before('<a href="#" class="checkbox">&#10004;</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;
});

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 5 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!