javascript - 如何使用 jquery 隐藏表行具有未经检查的输入

Question

我正在尝试做一个过滤器，当按下一个按钮时，它将只显示表中有checked输入的行。

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

您可以使用 :has选择器或 .has()检查父元素是否存在的方法。

$("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>

您可以在 demo 中的全部 html 上测试代码