jquery problem

<script type="text/javascript">
    $(document).ready(function(){
        $(".checkbox").toggle(
            function(){ $(this).css({"background-position":"0 -24px"}).children("input").prop("checked", true); },
            function(){ $(this).css({"background-position":"0 0"}).children("input").prop("checked", false); }
        );
    });
</script>

<label class="checkbox"><input type="checkbox" name="foo" /></label>

$(document).ready(function(){
    $(".checkbox").toggle(
        function(){ $(this).css({"background-position":"0 "+($(this).children("input").prop("checked")?"-24px":"0")}); }
    );
});

<script type="text/javascript">
    $(document).ready(function(){
        $(".checkbox").click(
            function(){ $(this).css({"background-position":"0 "+($(this).children("input").prop("checked")?"-24px":"0")}); }
        );
    });
</script>