How can I fix this customizing input checkbox

I made these code below. But, there is something problem of customizing input checkbox. When I drag text in , the css in can be changed but the input doesn't work and change to attribute as 'checked'. :( I don't know how to fix it, and can't find some good example of this customizing input javascript. My client want it to work on IE8. Please help me to fix it. ~

<script>
$(document).ready(function(){

    $('.check_style1 label').click(function(){
        $(this).toggleClass('checked');
    });
});

</script>

<div class="check_style1">
    <input type="checkbox" name="checkboxSt1" id="test1"><label for="test1">test 1</label>
    <input type="checkbox" name="checkboxSt1" id="test2"><label for="test2">test 2</label>
    <input type="checkbox" name="checkboxSt1" id="test3"><label for="test3">test 3</label>  
</div>