jQuery - 選中復選框時的顏色表行，否則刪除

Question

我有點卡住，無法理解這個問題。 我已經設置了一些jQuery來識別無線電輸入中的值，這些值與表中的值對齊。 這是對表進行一些過濾的開始。

我希望發生以下三件事：

• 無論何時單擊過濾器並且單元格具有相同的值，它的行都會突出顯示
• 每當您檢查該選項時，它都會被刪除
• 如果頁面加載並且已選中某個選項，則該行將在加載時突出顯示

jQuery代碼：

$(function () {
    // On Change of Radio Buttons
    $('input').on('change', function () {
        var filter = $('input:checkbox[name=filter]:checked').val();

        // Edit the Rows
        $(".gameStatus").filter(function () {
            return $(this).text() == filter;
        }).parent('tr').addClass('filtered');
    });
});

jsfiddle： http ： //jsfiddle.net/darcyvoutt/8xgd51mg/

Answer 1

$(function () {
    var filters = [];
    var edit_rows = function () {
        filters = [];
        $('input:checkbox[name=filter]:checked').each(function () {
            filters.push(this.value);
        });

        // Edit the Rows

        $(".gameStatus").each(function () {
            $(this).parent('tr')
              .toggleClass('filtered',
                filters.indexOf($(this).text()) > -1
              );
        });
    }
    edit_rows();

    // On Change of Radio Buttons
    $('input').on('change', edit_rows);
});

的jsfiddle

編輯：添加的功能，以便在頁面加載時調用它

Answer 2

這是替代解決方案......

 $(function () { function highlight() { var filter = $(this).val(); var checked = this.checked; // Edit the Rows var affectedRows = $(".gameStatus").filter(function () { return $(this).text() == filter; }); if (checked) { affectedRows.parent('tr').addClass('filtered'); } else { affectedRows.parent('tr').removeClass('filtered'); } } $('input').each(highlight); // On Change of Radio Buttons $('input').on('change', highlight); }); 

 .filtered { background: tomato; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="filters"> <input type="checkbox" name="filter" id="draft" value="Draft" checked /> <label for="draft">Draft</label> <input type="checkbox" name="filter" id="active" value="Active" /> <label for="active">Active</label> <input type="checkbox" name="filter" id="complete" value="Complete" /> <label for="complete">Complete</label> <input type="checkbox" name="filter" id="acrhived" value="Archived" /> <label for="acrhived">Archived</label> </div> <table id="userManager"> <tbody> <tr> <th>Game</th> <th>Teams</th> <th>Status</th> </tr> <tr> <td>Another Game</td> <td>New Team, Project Lucrum</td> <td class="gameStatus">Active</td> </tr> <tr> <td>New Game</td> <td>No teams selected</td> <td class="gameStatus">Draft</td> </tr> <tr> <td>New Game</td> <td>New Team, Just in Case</td> <td class="gameStatus">Active</td> </tr> </tbody> </table> <div class="test"></div> </div> 

Answer 3

嘗試這個。 :)

$(function () {
    var highlight = function(el){
        if(el.is(':checked')){
            $(".gameStatus:contains("+el.val()+")")
            .parent('tr').addClass('filtered');
        }else{
            $(".gameStatus:contains("+el.val()+")")
            .parent('tr').removeClass('filtered');
        }
    }

    //On Load
    highlight($('input[type="checkbox"][name=filter]:checked'));

    // On Change of Radio Buttons
    $('input').on('change', function () {
        highlight($(this));    
    });
});