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

Yes i tried the if statement along with the checked selector but could not get any of it to work — Shawn Sonnier
– Shawn Sonnier, Commented Jul 25, 2015 at 18:42

Aruna Tebel · Accepted Answer · 2015-07-25 18:53:24Z

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

edited Jul 25, 2015 at 18:53

answered Jul 25, 2015 at 18:44

Aruna Tebel

1,4661 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

classicalConditioning · Accepted Answer · 2015-07-25 22:11:56Z

0

put this statement in your function that triggers on checked property of #nfl change: if(('#nfl').is(':checked')) and act accordingly to the result : )

edited Jul 25, 2015 at 22:11

answered Jul 25, 2015 at 18:42

classicalConditioning

6557 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery show and hide using checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related