選中復選框時隱藏表中的其他行

Question

<table id="linkedin_match">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Industry</th>
                <th>Company</th>
                <th>Position</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
        </table>

使用上表，我將如何執行邏輯，以便如果選中此復選框，其他行將隱藏？ 這些行不僅限於兩行。 可能是五個，可能是十，也可能僅僅是一個。 目前我的代碼是：

$('document').ready(function() {
   var tr = $('#linkedin_match tr');
});

現在我不知道該怎么辦。 我也是JS的新手。 謝謝。

Answer 1

添加一個復選框

<input type="checkbox" class="check"> Check me

然后調用jQuery切換

$('.check').click(function(){
    $('td.hide').toggle();
});

小提琴： http : //jsfiddle.net/webbymatt/DLxjR/

ps在我的示例中，我在要隱藏的單元格上放置了一個類，這也可以應用於整行。 在這種情況下：

<td class="hide">WC Claim Manager</td>

Answer 2

首先，您不應有兩個具有相同ID的元素。 將其更改為類，您可以執行以下操作：

$(document).on('click', '.match', function(){ 


    if ($(this).is(':checked')) { 
        $('.match').closest('tr').hide();
        $(this).closest('tr').show(); 
    } else { $('.match').closest('tr').show(); }

});

當未選中復選框時，此解決方案將顯示所有帶有復選框的行，並且僅在選中復選框時顯示相關的行。

Answer 3

您可以這樣做。 ids必須是唯一的，因此請更改match作為類名。

$(document).ready(function() {
    $('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
        var $this = $(this);
        $('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
        //since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
       //And un checking will bring all of them back to visible state.
    });
});

小提琴

如果您無法控制將id更改為class或添加class，則可以定位該復選框

 $('#linkedin_match :checkbox').change(function(){...});

• gt（0） -選擇索引大於0的行。即避免第一個行。
• 最近的（'tr'） -獲取選中元素的父tr。
• not（$ this.closest（'tr'）） -添加過濾器。 即排除當前行。
• toggle（） -切換元素的狀態。