jQuery - 选中复选框时的颜色表行，否则删除

Question

I'm a little stuck, can't get my head around this problem. I have setup some jQuery that identifies the values in radio inputs, which align with values within the table. This is the start to doing some filtering on a table.

I want the following three things to happen:

• Whenever you click on a filter and the cell has the same value, it's row gets highlighted
• Whenever you check that option off, it gets removed
• If the page loads and an option is already checked, the row gets highlighted on load

jQuery Code:

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

edit: added functionality so it gets invoked on page load

Answer 2

Here's alternate solution ...

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

try this. :)

$(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));    
    });
});