display data only on selecting a checkbox

i have a check box, and want that when it is selected/checked, values from another file (i.e c_datetime.php) should get loaded, for this i have used ajax, when i select/check the checkbox the values are getting loaded properly but when i uncheck it the loader gets loaded again and the ajax displays the data again, whereas the proper way should have been that when the checkbox is selected the values should get loaded and when its unselected the values should disappear, can anyone please tell why its not working the way it should

<script>
$(document).ready(function(){
   $('#drive').change(function(){

        var catid = $('#drive').val();
        console.log($('#drive'))
        if(catid != 0)

        {
            LodingAnimate();
            $.ajax({
                type:'post',
                url:'c_datetime.php',
                data:{id:catid},
                cache:false,
                success: function(returndata){
                    $('#datetime').html(returndata);
                console.log(returndata)
                }
            });

             function LodingAnimate() 
                {
                    $("#datetime").html('<img src="img/ajax-loader.gif" height="40" width="40"/>');
                } 
        }
    }
    )
}) 

</script>   


<div id="datetime"> </div>
<input type="checkbox" name ="chk" id="drive" value="Drive" >Drive