基于复选框的Javascript数据过滤器

Question

我对 Javascript 很陌生，我正在尝试根据复选框过滤/更新数据。如果您看到下面的内容，我可以根据我创建的数据(数据集2)中的值过滤数据。 Dataset3 是问题...我想单击复选框并根据选中的值更新数据集。

首先，我不确定如何将值数组传递到过滤器中(例如，如何将“Books”&&“Supplies”传递到过滤器中。正如您在 dataset2 中看到的那样，我只能将其等于“书籍”。第二，当选中/取消选中复选框时，如何更新它。我也为此创建了一个 fiddle 。谢谢。https://jsfiddle.net/at2046/mqjyjfox/8/

var dataset = [['Books','GEB'],
                                ['Books','Decision Theory'],
                                ['Supplies','Pencil'],
                ['Supplies','Paper']
                ];

document.getElementById("demo").innerHTML = dataset;

var dataset2 = dataset.filter(function (el) {
        return el[0] == "Books";
        });

document.getElementById("demo2").innerHTML = dataset2;


$(":checkbox").change(function() {
var dataset3 = dataset.filter(function(el) {
var checkboxes = document.getElementsByName('result');
for (var index = 0; index < checkboxes.length; index++) {
return el[0] == checkboxes[index].value;
    }
});

document.getElementById("demo3").innerHTML = dataset3;
});

Answer 1

首先，您添加了一个 $(:checkbox')，这是一种 jQuery 语法，并且您的 fiddle 中没有加载该库。

然后，您在 for 中使用 return，这意味着在第一次迭代(选择 Books)时，脚本将退出，仅返回属于第一个迭代的元素选择列表中的项目。

一个选项是将 for 替换为 while 来检查 el[0] 是否存在于任何选项中。

最后，您没有检查复选框是否已选中，这意味着无论复选框的状态如何，它都会返回所有内容。

$(":checkbox").change(function() {
    var dataset3 = dataset.filter(function(el) {
        var checkboxes = document.getElementsByName('result');
        var index = 0;
        var found = false;
        while (index < checkboxes.length && !found) {
            if (checkboxes[index].checked && el[0] == checkboxes[index].value) found=true;
            ++index;
        }
        return found;
    });

    document.getElementById("demo3").innerHTML = dataset3;
});

https://jsfiddle.net/mqjyjfox/10/