Jquery show and hide using checkbox

I have a dynamically generated table, and in one column I have a checkbox field and a text field. What I'm trying to achieve is if the checkbox is checked it will show the text field. And if its unchecked it will hide the text field. the table is inside div #nfl. The deleteLink function works fine. The checked unchecked functionality is not.

$(document).ready(function() {
$("#nfl .deleteLink").on("click",function() {
    var tr = $(this).closest('tr');
    tr.css("background-color","#FF3700");

    tr.fadeOut(400, function(){
        tr.remove();
    });
  return false;
});
var td = $(#nfl).closest('td');
var total = $(#nfl).siblings(":text");
var box = $(#nfl).siblings(":checkbox");   
$(function() {


    if(box.is(":checked")){ 
        total.fadeOut(400, function(){
            total.hide();
        }
    }else{
        total.fadeIn(400, function(){
            total.show();
        }
    }
    );
    return false;
}); 

});