如何使用ajax更新img src？

Question

用户点击链接，这是一个空复选框的图像。这是我的HTML：

<a href="" class="completeTask" id="<?php echo $task->id ?>" name="taskStatus">
<img src="<?php echo ( $task->complete == 1 ) ? "/images/task-checkbox-filled.png" : "/images/task-checkbox-empty.png" ?>" class="task-checkbox" />
</a>

.js脚本被调用：

$( function() {

 $( ".completeTask" ).click( function() {

    var taskID = $( this ).attr( "id" );
    var name = $( this ).attr( "name" );
    var data = "taskID=" + taskID;
    var parent = $( this );
    var image = $( ".task-checkbox" );

    if ( name == "completeTask" ) {

        $.ajax( {

            type: "POST",
            url: "/scripts/completeTask.php",
            data: data,
            cache: false,

            success: function( imageSource ) {
                image.attr( 'src', imageSource );
            }
        } );
    }

    return false;
} );
} );

completeTsk.php返回的结果是图像路径和文件名：

    //Return image path and filename
    if ( $task->complete == 1 )
        echo "/images/task-checkbox-filled.png";
    else
        echo "/images/task-checkbox-empty.png";

    exit;

我的预期结果是加载了一个填充复选框的新图像，但是当用户点击原始的空复选框时，图像就会消失。