0

请帮助我，因为我仍在尝试掌握 jQuery 编码。我有这些数据，并希望根据用户的复选框选择对其进行过滤，如下面的 html 代码。

. 未选中时显示所有行。

. 当所有复选框都被选中时显示所有行

.仅显示符合选定条件的行。例如，

一种。选中 2GB 时，仅显示 2GB 行。

湾。选中 Shipping 和 2GB 时，仅显示 Memory3

<input type="checkbox" >1GB<br/>
<input type="checkbox" >2GB<br/>
<input type="checkbox" >4GB<br/>
<input type="checkbox" >1000MHz<br/>
<input type="checkbox" >1333MHz<br/>
<input type="checkbox" >Discontinued<br/>
<input type="checkbox" >Shipping<br/>
<br /><br />

<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">
<caption>bla bla</caption>
<thead>
    <tr id="ProductID">
        <th>Product Number</th>
        <th>Status</th>
        <th>Capacity</th>
        <th>Speed</th>
    </tr>
</thead>
<tbody>
    <tr id="Memory1">
        <td>Memory1</td>
        <td>Shipping</td>
        <td>1GB</td>
        <td>1333MHz</td>
    </tr>
    <tr id="Memory2">
        <td>Memory2</td>
        <td>Discontinued</td>
        <td>1GB</td>
        <td>1000MHz</td>
    </tr>
    <tr id="Memory3">
        <td>Memory3</td>
        <td>Shipping</td>
        <td>2GB</td>
        <td>1333MHz</td>
    </tr>
    <tr id="Memory4">
        <td>Memory4</td>
        <td>Discontinued</td>
        <td>4GB</td>
        <td>1000MHz</td>
    </tr>
    <tr id="Memory5">
        <td>Memory5</td>
        <td>Shipping</td>
        <td>4GB</td>
        <td>1333MHz</td>
    </tr>
</tbody>
4

1 回答 1

2

感觉有点大方，下面的代码执行以下操作

  1. 在复选框更改时，映射一组选定值
  2. 迭代选定的值并找到td包含所述值

  3. tr显示所选值的父级

    $(":checkbox").change(function() {
    var checkedValues = $(":checkbox:checked").map(function() {
        return this.value;
    }).get();

    $("tbody tr").hide();
    for (var i = 0; i < checkedValues.length; i++) {
        $("tbody tr td:contains('" + checkedValues[i] + "')").parent("tr").show();
    }
});

演示：http: //jsfiddle.net/kXNAg/

于 2013-11-04T21:00:10.650 回答