Yogi_Bear Yogi_Bear - 4 months ago 22
jQuery Question

How to hide table row has unchecked input using jquery

Hi I'm trying to do a filter that when a button pressed it will show only the row has

checked
input in the table.

<table class="table">
<tr>
<th>Name</th>
<th>InUse</th>
<th></th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
<a href="/AdditivesNames/Edit/5">Edit</a> |
<a href="/AdditivesNames/Details/5">Details</a> |
<a href="/AdditivesNames/Delete/5">Delete</a>
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
<a href="/AdditivesNames/Edit/3">Edit</a> |
<a href="/AdditivesNames/Details/3">Details</a> |
<a href="/AdditivesNames/Delete/3">Delete</a>
</td>
<tr/>
<!-- not checked -->
<tr>
<td>foo 3</td>
<td>
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
<a href="/AdditivesNames/Edit/5">Edit</a> |
<a href="/AdditivesNames/Details/5">Details</a> |
<a href="/AdditivesNames/Delete/5">Delete</a>
</td>
</tr>
</table>

Answer

You can use :has selector or .has() method to checking existence of element in parent.

$("button").click(function(){
    $("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Name</th>
        <th>InUse</th>
    </tr>
    <tr>
        <td>foo 1</td>
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 2</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 3</td>                  
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 4</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
</table>
<button>Only checked</button>

You can test code on full of you html in demo