samedi 25 juillet 2015

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 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>

$(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;
});

});




Aucun commentaire:

Enregistrer un commentaire