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/
----------
the test, when button 'btn' clicked:
the buttons
<br>
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/
----------
JavaScript:
//test
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.checkbox {
width: 26px;
height: 26px;
background: transparent url(checkbox.png) }
.checked {
background: transparent url(checkbox_on.png)}
</style>
<script type="text/javascript">
$(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')
});
});
</script>
<body>
<div id="test" class="checkbox"></div>
<button id="btn">
Test
</button>
</body>the test, when button 'btn' clicked:
the buttons
<br>