SO Answer / how to use images for check boxes using css or may be javascript

see http://stackoverflow.com/questions/9496581/how-to-use-images-for-check-boxes-using-css-or-may-be-javascript/9496721#9496721

by KooiInc MeHere

HTML

<input id="cb1" class="wrapped" checked="checked">
<span id="cb1_wrap" class="wrap checked"> choose 1</span><br />

<input id="cb2" class="wrapped">
<span id="cb2_wrap" class="wrap unchecked"> choose 2</span><br />

<input id="cb3" class="wrapped">
<span id="cb3_wrap" class="wrap unchecked"> choose 3</span><br />

<br />
<div id="report"></div>

CSS

body {font: normal 0.8em verdana,arial; margin: 2em;}

.wrapped {display: none;}

.unchecked {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAK3RFWHRDcmVhdGlvbiBUaW1lAHdvIDI5IGZlYiAyMDEyIDEwOjQ4OjU2ICswMTAw9V5ZEQAAAAd0SU1FB9wCHQkxIxpw55kAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAEZ0FNQQAAsY8L/GEFAAAArklEQVR42j2PSxKEIAxEIYJSZbnxrlzAvRtP6kYU/M1jUjMsmqQ73QE7TVPbtvu+931/3/f7vud5Ps9De12X897HGEUECq1pmso6x9A8z/VSDUQ2xqDRYiulCONkWmsRQAQtwK7rhCl89GpVpGUFtRCuLBQxjJrvIbXKpP2tUBrLViWdujGRpq9D4KuQ9dXjOOac1Sq/Q7tt2zAMbl3XZVmO4+A/7AYJICmEkFL6AMf9gVWePPviAAAAAElFTkSuQmCC) left center no-repeat;
    padding-left: 15px;
    cursor: pointer;
    color: red; 
}

.checked {
background: url(   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAK3RFWHRDcmVhdGlvbiBUaW1lAHdvIDI5IGZlYiAyMDEyIDEwOjQ4OjMzICswMTAwYQl/MQAAAAd0SU1FB9wCHQkxOecSHuMAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAEZ0FNQQAAsY8L/GEFAAAAlElEQVR42j2PCQ7FIBBC3Vr1jL3/Gapx+2/CT01K6Awg+ud5QgjnnL03mHNurZVSeu8pJVZhjOGcizHe980OXGsxAc0nFWTOiQjCggCbk+m9V7JE+CCEG/mmoNwg/E/oIiGBpBHD3SCFLJwuKD45o/d9VdMMtVamVjKE67ogmuip5uaHALXTgoPbwvlorotBZSJVwR/MKppFnb0uyQAAAABJRU5ErkJggg%3D%3D) no-repeat left center;
    padding-left: 15px;
    cursor: pointer;
    color: green;
}

JavaScript

var wrappedCBs = document.querySelectorAll('.wrap');

for (var i=0;i<wrappedCBs.length;(i=i+1)){
    wrappedCBs[i].onclick = cbClickHandler;
}

function cbClickHandler(e){
      var relatedCheckBox = document.querySelector('#'+this.id.substr(0,this.id.indexOf('_')));
      relatedCheckBox.checked = !relatedCheckBox.checked;
      this.className = 'wrap '+ (relatedCheckBox.checked ? 'checked' : 'unchecked');
      // report checkstate
      report('#'+this.id.substr(0,this.id.indexOf('_')) +' checked state:  '+relatedCheckBox.checked);
}

function report(str){
    document.querySelector('#report').innerHTML = str;
}