Individual Checkbox Image Replacement - html

Question

I am looking to try something like in the below link, however I want different images for each checkbox. Is there any way to do this? I have tried setting different classes for each item and just adding the class to the checkbox, but that doesnt seem to work...the default checkboxes just remain the same.
MY ATTEMPT:
https://jsfiddle.net/9qjj7012/
<div class="AccordionPanel" id="acc-step-3">
<div class="AccordionPanelTab">Step Three - Equipment Package</div>
<div class="AccordionPanelContent">
<div class="">
<input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
<input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
<input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
<input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
</div>
<div class="form-gap"></div>
<input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
<input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
<input name="reset" type="reset" class="form-btn form-reset" value="Reset">
</div>
</div>
EXAMPLE OF THE RESULT I WOULD LIKE:
http://codepen.io/jointmedias/pen/HqCJe (Except with individual images for each checkbox)
NEW JSFIDDLE: https://jsfiddle.net/9qjj7012/

Answer 1

What you're doing wrong, is that you're assigning a class to the checkbox, while the CSS rules in the example you refer to don't select the check box, they select the label. The checkbox is actually hidden, it's the label you are seeing.
Check this out:
http://codepen.io/DavidvanDriessche/pen/xVwJgd
In this example the labels have different classes and the css rules act upon that as follows:
For all checkboxes:
input[type=checkbox] {
display: none;
}
For all labels with class background1 that are following a checkbox:
input[type=checkbox] + label.background1 {
background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}
For all labels with class background2 that are following a checkbox
input[type=checkbox] + label.background2 {
background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}
For all labels with a class attribute that begins with "background" and are following a checkbox:
input[type=checkbox] + label[class*="background"] {
background-size: 50%;
height: 250px;
width: 250px;
display: inline-block;
padding: 0 0 0 0px;
}
The only reason I'm working with that last rule is that it allows you to put all common formatting code into one CSS rule and you don't have to repeat it for each of the rules that target a specific background class, but that's a nicety you could forego if you want.

Answer 2

So far checkbox does not support background attribute. Luckily checkbox label also work as a clickable area for the assigned (for=checkboxId) checkbox. So the idea is to make a fake checkbox using label element and then change it's background value when checked.
input { display:none; } /* hide the checkbox. Label is our clickable area */
label { /* define the clickable area */
height: 150px;
width: 150px;
display: inline-block;
border: 2px solid;
}
/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg');
}
See Demo