Create a javascript To Do list

I'm trying to create a simple to do list using only javascript and html. Whenever a user checks the check-box I'd like the check box's css to change with a text decoration of a line-through. While debugging I figured the function DeleteToDo isn't even invoked by the event of change.

Any ideas what am I doing wrong?

var todo = "";

$(document).ready(function (){

    $("button").on("click", addATodo);
    $("input[type='checkbox']").on("change", deleteTodo());


});

function addATodo(){
    var todo = $("input").val();
    console.log(todo);
    $("div").append('<input type="checkbox"><p>' + todo + '</p><br/>');
}

function deleteTodo(){
    if($(this).is(":checked")) {
        $("p").css("text-decoration","line-through");

    }

}

<input type="text" placeholder="To do"/>
<button>Add a To Do</button>
<br>
<div></div>