change label css class for checkbox if checked

I have checkboxes that are hidden. I have images as the labels for the checkboxes, so that when the images are clicked the checkboxes are clicked. I am trying to make it so that the image has different opacities depending on whether the box is checked or not. Here is my css for the image label:

.checkbox-label{
    opacity: .2;
}
.checkbox-label:hover{
    opacity: .5;
}

.checkbox-label-after-click{
    opacity: 1;
}

Here is my javascript to move the classes

<script>
    $('.checkbox-label').click(function(){  
        var the_input = $(this).next('input');
        if(the_input.checked){
            $(this).addClass( "checkbox-label-after-click" );
        } else {
            $(this).removeClass("checkbox-label-after-click");
        }
    });
</script>

Basically, when someone clicks on the label, it should grab the next input, which is the checkbox, the label's classes should change. I've also tried switching the addClass and removeClass methods, which makes the class switch work on the first click, but never after.

Here is the html:

How do I get this to work?