reference http://stackoverflow.com/a/16353114 http://stackoverflow.com/a/8809891
http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/ http://www.thheuer.com/2011/10/jquery-plugins-image-radio-buttons/
ScrewDefaultButtonsV2** http://github.com/mattSOLANO/ScrewDefaultButtonsV2 or http://screwdefaultbuttons.com/ ———-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//test
<style>
.checkbox {
width: 26px;
height: 26px;
background: transparent url(checkbox.png) }
.checked {
background: transparent url(checkbox_on.png)}
</style>
$(function()
{
//button click
$('#btn').on('click', function(e) {
var bg_url = $('#test').css('background-image');
if (bg_url.indexOf('_on.png')>0)
console.log("checked");
else
console.log("un_checked");
console.log(bg_url);
});
$("#test").click(function() {
$(this).toggleClass('checked')
});
});
<div id="test" class="checkbox"></div>
<button id="btn">
Test
</button>
the test, when button ‘btn’ clicked: 
the buttons 
</strong>
origin - http://www.pipiscrew.com/?p=2657 css-html-checkbox-with-image-states