列表js filter by单选按钮

你的小提琴犯了三个小错误。

1. 您忘记了包含jQuery本身(单击带有小齿轮的“Javascript”按钮)
2. 你的单选按钮有相同的ID。这在HTML中是非法的。删除ID,您不需要它们。
3. 您希望在上筛选项目 dap_status ,未启用 search_radio .

因此,有了这些知识,我们可以:

$(':radio[name=search_radio]').change(function () {
    var selection = this.value;

    dap_list.filter(function (item) {
        return item.values().dap_status == selection;
    });
});

请注意

if (booleanCondition) {
    return true;
} else {
    return false;
}

是一种反模式。别这么做,简单点 return booleanCondition; 就像我在上面做的那样。

您必须更改HTML中的重复ID。

<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio1" value="Awaiting Approval">Awaiting Approval
</label>
<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio2" value="Needs Further Review">Needs Further Review
</label>
<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio3" value="Approved">Approved
</label>

对于JS,您可以使用:

    var dap_list = new List('dap_list', {
        valueNames: ['waste_name', 'client_name', 'created_by', 'timestamp', 'dap_status'],
        page: 8,
        plugins: [
            ListPagination({})
        ]
    });

    $('.search').change(function() {

        var selection = this.value;

        dap_list.filter(function(item) {
            var status = item.values().dap_status;
            return status == selection;
        });
    });