Custom Checkbox

by Taufik Nurrohman

HTML

<input type="checkbox" checked="checked" />
<input type="checkbox" />
<br /><br /><br />
<input type="checkbox" id="ex" /><label for="ex">Sampel Label Checkbox</label>

CSS

body {padding:50px;}

.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;
}

.checked {color:white;background-color:#226C9C;}

label {cursor:pointer;}

JavaScript

$(':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.checkbox diklik...
$('a.checkbox').click(function() {
    // Jika elemen setelah a.checkbox 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;
});