JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<input id="tickbox_1" checked="checked" type="checkbox" name="ticked[]" value="1">
<label for="tickbox_1" class="check_buttons selected"></label>Tickbox

CSS

input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}

.check_buttons {
background: url("http://dev.paperlesswedding.co.uk/images/check_buttons.png") top left no-repeat;
width: 18px;
height: 18px;
background-position: -10px -10px;
display: inline-block;
float: left;
}

.check_buttons.selected {
background-position: -10px -94px;
}


.check_buttons:active {
background-position: -10px -66px;
}

JavaScript

$('.check_buttons').on('click',function(e){
        if( $(this).hasClass('selected') )
        {
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
        }
    });