Checkbox not staying "checked"

I recently asked for help in getting my images to replace the checkboxes. I have accomplished that, however when I "check" my boxes, I would like them to either remain at opacity:1 OR replace the image with a new one. (Just testing the opacity idea first.) None of my ideas have worked so far. The below jsFiddle is what I have so far!

jsFiddle: http://ift.tt/1YeBIiz

input[type=checkbox].equipment {
    display: none;
}
label {
    display: inline-block;
    padding: 0 0 0 0px;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
.speaker {
    height: 150px;
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
    background: url(http://ift.tt/1SpTv66);
    opacity: 0.5;
}
.speaker:hover {
    opacity: 1;
}
.subwoofer {
    height: 150px;
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
    background: url(http://ift.tt/1YeBIiC);
    opacity: 0.5;
}
.subwoofer:hover {
    opacity: 1;
}
.smokemachine {
    height: 150px;
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
    background: url(http://ift.tt/1SpTvmo);
    opacity: 0.5;
}
.smokemachine:hover {
    opacity: 1;
}




input[type=checkbox] + label.speaker {
    background: url(http://ift.tt/1SpTv66) no-repeat;
    cursor: pointer;
    opacity: 0.5;
}
input[type=checkbox] + label.subwoofer {
    background: url(http://ift.tt/1YeBIiC) no-repeat;
    cursor: pointer;
    opacity: 0.5;
}
input[type=checkbox] + label.smokemachine {
    background: url(http://ift.tt/1SpTvmo) no-repeat;
    cursor: pointer;
    opacity: 0.5;
}
input[type=checkbox]:checked + label {
    opacity: 1;
}