如何使用复选框过滤多个列表项？答案

【问题标题】：How do I filter multiple list items using checkboxes?如何使用复选框过滤多个列表项？
【发布时间】：2017-03-19 08:47:43
【问题描述】：

如何创建 2 个复选框，显示（即）1. 食物和 2. 音乐家……

在哪里
1) 如果两个复选框都被选中，则会显示食物和音乐家；
2) 如果勾选了 food 而未勾选了音乐家，该元素仍然可见，因为它包含了食物，尽管它也包含了音乐家；
3）如果选中了音乐家而未选中食物，它仍然是可见的，因为它包含音乐家，尽管它也包含食物；
4）如果food和music都没有勾选，li项就消失了。

我的html是：

<html>
<head>
</head>
<body>

<ul class="filterSection">
<li>
<input checked="true" type="checkbox" value="Food"/>
<label>Food</label>
</li>
<li>
<input checked="true" type="checkbox" value="Musician"/>
<label>Musician</label>
</li>
</ul>

<ul id="itemsToFilter">
<li data-type="Food">Food</li>
<li data-type="Musician">Musician</li>
<li data-type="Food Musician">Food & Musician</li>
<ul>

</body>
</html>

以及以下 javascript 代码（集成在两个列表下方）：

<script>
// get all of our list items
var itemsToFilter = document.querySelectorAll("#itemsToFilter li");
  
//setup click event handlers on our checkboxes
var checkBoxes = document.querySelectorAll(".filterSection li input");
  
for (var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].addEventListener("click", filterItems, false);
    checkBoxes[i].checked = true;
}
  
// the event handler!
function filterItems(e) {
    var clickedItem = e.target;
      
    if (clickedItem.checked == true) {
        hideOrShowItems(clickedItem.value, "hideItem", "showItem");
    } else if (clickedItem.checked == false) {
        hideOrShowItems(clickedItem.value, "showItem", "hideItem");
    } else {
        // deal with the indeterminate state if needed
    }
}
  
// add or remove classes to show or hide our content
function hideOrShowItems(itemType, classToRemove, classToAdd) {
    for (var i = 0; i < itemsToFilter.length; i++) {
        var currentItem = itemsToFilter[i];
          
        if (currentItem.getAttribute("data-type") == itemType) {
            removeClass(currentItem, classToRemove);
            addClass(currentItem, classToAdd);
        }
    }
}
  
//
// Helper functions for adding and removing class values
//
function addClass(element, classToAdd) {
    var currentClassValue = element.className;
        
    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}
        
function removeClass(element, classToRemove) {
    var currentClassValue = element.className;
  
    if (currentClassValue == classToRemove) {
        element.className = "";
        return;
    }
  
    var classValues = currentClassValue.split(" ");
    var filteredList = [];
  
    for (var i = 0 ; i < classValues.length; i++) {
        if (classToRemove != classValues[i]) {
            filteredList.push(classValues[i]);
        }
    }
  
    element.className = filteredList.join(" ");
}
</script>

我发现在 css 中你可以做到以下几点：

#itemsToFilter li[data-type*=Food] {background-color: green;}
#itemsToFilter li[data-type*=Musician] {background-color: yellow;}

（星号导致识别一个或多个数据类型属性）

那里没有问题，所以我对javascript部分感兴趣：

我想要这个，而不必创建一个名为“美食音乐家”的新复选框。这可以通过添加来完成

#itemsToFilter li[data-type*='Food Musician'] {background:pink;}

所以只能使用复选框“食物”和“音乐家”。

在http://test.kompagniekistemaker.nl上查看或关注此示例

我的问题是在阅读了 Kirupa 的这篇文章后提出的：
https://www.kirupa.com/html5/filtering_items_in_a_list.htm

我也找到了这个例子，这正是我想要的：
Filter by multiple data attribute elements

获胜的答案将获得一块巧克力。
提前非常感谢！

【问题讨论】：

标签： javascript html css checkbox filter

【解决方案1】：

尝试像这样修改您的 if 语句：

if (currentItem.getAttribute("data-type").indexOf(itemType) !== -1)

我很确定你知道它在做什么。它在您的数据属性中搜索子字符串。 indexOf() 如果找到，则返回子字符串的第一个字符的位置；如果未找到子字符串，则返回 -1。它解决了你的问题吗？

【讨论】：

【解决方案2】：

一位朋友使用这段 javascript 解决了这个问题。每个部分都单独解释。

简而言之：如果我在 ul 中创建一个带有“.filterSection”类的复选框，该复选框与另一个 ul 对应，该 ul 包含一个带有“.itemsToFilter”类的 li 元素，则会发生以下情况：

如果没有选中复选框，它将显示该特定 ul 的所有内容
如果选中一个或多个复选框，则会显示相应复选框的内容

如果你只想在你的 ul 中添加一个 li 元素，你可以使用 display:none; 添加一个“不可见”的额外 li 元素； css 中的属性，并在 html 中设置为“checked="true"”。这样，在看似一个项目的列表中总会有一个选中的元素，导致单个可见 li 元素的行为与两个或多个 li 元素列表中的 li 元素相同。如果你不这样做，你的一个 li 元素将始终可见，因为当它未被选中时，它将显示所有内容（规则 1，上面）。

变量部分；变量项；

init();

// 初始化函数函数初始化（）{ // 获取复选框部分和要过滤的项目部分=查询（'.filterSection'）； items = query('.itemsToFilter li');

// Create a section for every group of checkboxes
for (var i = 0; i < sections.length; i++) {
    sections[i] = query('input', sections[i]);

    // Loop over the checkboxes in a section
    for (var j = 0; j < sections[i].length; j++) {

        // Add event listener (filter on change)
        sections[i][j].addEventListener('change', filter);
    }
}

}

//复选框被点击或取消点击时调用的函数功能过滤器（）{ // 获取选中的复选框 var selection = getSelection();

// Loop over all items
for (var i = 0; i < items.length; i++) {
    // Initially, every item will be shown
    var show = true;

    // Get the tags associated with the item
    var tags = items[i].dataset.type.split(',');

    // Loop over each tag section
    for (var j = 0; j < selection.length; j++) {

        // If the section has no checked boxes, it will be ignored
        if (selection[j].length == 0) continue;

        // Hide the item, unless we tell it to be shown later
        var allow = false;

        // Loop over the associated tags
        for (var k = 0; k < tags.length; k++) {

            // If the tag is also one that has been selected, allow the item to be shown
            if (selection[j].indexOf(tags[k]) > -1) {
                allow = true;
            }
        }

        // If one of the tags was disallowed, hide the item. Do not keep checking as this is unnecessary
        if (!allow) {
            show = false;
            break;
        }
    }

    // Add the appropriate class
    if (!show) items[i].classList.add('hideItem');
    else items[i].classList.remove('hideItem');
}

}

// 获取选中复选框的函数函数 getSelection() { // 这里我们将跟踪选中的框变量选择 = [];

// Loop over each section
for (var i = 0; i < sections.length; i++) {
    // Initialize an empty selection list per section
    selection[i] = [];

    // Loop over the checkboxes in this section
    for (var j = 0; j < sections[i].length; j++) {

        // Get the checkbox
        var checkbox = sections[i][j];

        // If the checkbox is checked, add it to the selection list
        if (checkbox.checked) selection[i].push(checkbox.value);
    }
}

return selection;

}

// 查询 DOM 并返回元素的实用函数函数查询（q，容器）{ // 如果没有给出容器，则恢复到整个文档容器 = 容器 ||文件；

// Query the container
var results = container.querySelectorAll(q);

// Return the results as an array
return Array.prototype.slice.call(results);

}

【讨论】：