Question

I have the following HTML:

<tr>
    <td>
        <input type="checkbox" class="showFilter" /> Ranks
    </td>
</tr>
<tr class="hideFilter">
    <td class="textBold">

        <select class="ranks singleListBox" id="select1" name="selectListFilterRank">
            <option value="all">All</option>
                <% Do While NOT rsGetRanks.EOF %>
                            <option value="<%= rsGetRanks("RankID") %>"><%= rsGetRanks("Description") %></option>

                <%  
                        rsGetRanks.MoveNext
                    Loop          
                %>                  
        </select>
    </td>
</tr>

I have the following JQuery:

$('.showFilter').change(function () {
                if(this.checked) {
                    $(this).parent('tr').next().show();
                } else {
                    $(this).parent('tr').next().hide();
                }

            });

I am trying to make it so when they click the checkbox, it will find the parent <tr>, go to the next <tr> and show that <tr>.

That part is not working, it will not show the <tr> for some reason.

All hideFilter is doing is setting the display to none, no other CSS should be messing with this currently.

Answer 1

parent() selects the direct parent, which is a <td>.
Use .closest('tr') to select the parent row.

Also, your code can be written even shorter using .toggle():

$('.showFilter').change(function() {
    $(this).closest('tr').next().toggle(this.checked);
});