JQuery show and hide using checkbox

Question

У меня динамически сгенерированная таблица, и в одном столбце у меня есть поле поля и текстовое поле. То, что я пытаюсь достичь, - если флажок установлен, он покажет текстовое поле. И если его непроверено, это скроет текстовое поле. Код jquery ниже работает, но мне нужно изменить вторую функцию, чтобы не только скрыть один раз, не отмечен, но и снова показать, как только вы снова отметили.

<div id="nfl" class="grid-view"> 
    <table class="table table-striped table-bordered"> 
     <tr data-key="9"> 
      <td>3</td> 
      <td><input type="text" name="" value="Green Bay"></td> 
      <td><input type="text" name="" value="Cincinnati"></td> 
      <td><input type="text" name="" value="3" maxlength="3" style="width:40px"></td> 
      <td><select name=""> 
        <option value="favorite" selected="">favorite</option> 
        <option value="underdog">underdog</option> 
       </select></td> 
      <td><input type="checkbox" class="checked" name="" value="1" checked=""> <input type="text" name="" value="33" maxlength="3" style="width:50px"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr> 
     <tr data-key="10"> 
      <td>4</td> 
      <td><input type="text" name="" value="Jacksonville"></td> 
      <td><input type="text" name="" value="Buffalo"></td> 
      <td><input type="text" name="" value="4" maxlength="3" style="width:40px"></td> 
      <td><select name=""> 
        <option value="favorite">favorite</option> 
        <option value="underdog" selected="">underdog</option> 
       </select></td> 
      <td><input type="checkbox" class="checked" name="" value="1" checked=""> <input type="text" name="" value="54" maxlength="3" style="width:50px"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr> 
    </table> 
</div> 

$(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; 
    }); 
    $("#nfl .checked").on("change",function() { 
     var td = $(this).closest('td'); 
     var total = $(this).siblings(":text"); 
     total.fadeOut(400, function(){ 
      total.hide(); 
     }); 
     return false; 
    });   
}); 

Answer 1

Добавить класс c-box с флажком.

<input type="checked checkbox" class="c-box" name="" value="1" checked=""> 

Тогда попробуйте использовать fadeToggle

$('.c-box').change(function() {     
    var td = $(this).closest('td'); 
    var total = $(this).siblings(":text"); 
    total.fadeToggle("slow", "linear"); 
    return false; 
}); 

Вы можете настроить функцию fadeToggle как вы предпочитаете

Answer 2

положить это утверждение в вашей функции, триггеры на checked свойство #nfl изменения: if(('#nfl').is(':checked')) и действовать в соответствии с результатом:)