jQuery-选中复选框时为表行着色，不选中时删除

jQuery - Color table rows when checkbox is checked and remove when not

本文关键字：删除复选框 jQuery- 更新时间：2023-09-26

我有点困了，无法理解这个问题。我设置了一些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/

$(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：添加了功能，以便在页面加载时调用

这是另一种解决方案。。。

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

试试这个。：）

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