Jquery show and hide using checkbox

Question

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 jquery code below works, but I need to change the second function to not only hide once unchecked, but also show once checked again.

<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

Add class c-box to the checkbox.

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

Then try using fadeToggle

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

You can customize the fadeToggle function as you prefer

Answer 2

将此语句放在您的函数中，该函数在#nfl checked属性更改上触发： if(('#nfl').is(':checked'))并根据结果采取相应的行动#nfl