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'))触发的函数中，并根据结果执行操作：）

使用复选框

2 个答案: