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

如何创建2个复选框，显示（即）1.食品和2音乐家......如何使用复选框过滤多个列表项目？

凡
1）如果两个复选框被选中，食品和音乐家都显示;
2）如果食物被检查并且音乐家未被检查，元素仍然可见，因为它包含食物，因为它还包含音乐家;
3）如果音乐家被选中并且食物未被选中，它也是可见的，因为它包含音乐家，尽管它也包含食物;
4）如果食物和音乐家都未选中，则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

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

来源

2016-11-05 Riddlemethis

尝试修改您的if声明是这样的：

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

我敢肯定，你知道它在做什么。它会在数据属性中搜索一个子字符串。indexOf()返回子字符串的第一个字符的位置（如果找到）或-1（如果未找到子字符串）。它能解决你的问题吗？

来源

2016-11-05 17:52:32

一位朋友使用这段javascript解决了这个问题。每件都分开说明。

简而言之：如果我创建在UL复选框与含有锂元素与类“.itemsToFilter”以下的另一个UL相对应的类的“.filterSection”发生的情况：

如果没有选择复选框，如果选择一个或多个复选框会显示特定的上行的一切
，就会显示出相应的复选框

如果你想在你的UL只有一个锂元素的含量，你可以使用display：none来添加一个'不可见的'多余的li元素：在CSS中的属性，并让它在HTML中被检查=“真”。通过这种方式，看起来只有一个项目的列表中会有一个checked元素，导致单个可见li元素的行为与li元素列表中li元素的行为相同。如果你不这样做，你的一个li元素将永远是可见的，因为当它未被选中时，它将显示一切（上面的规则1）。

var sections; var items;

init（）;

//初始化函数功能的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); 
    } 
}

}

//函数被点击复选框或未点击函数滤波器（）时被调用{ //获取所选择的复选框变种选择= 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);

}

来源

2016-11-17 11:13:41 Riddlemethis

工作实施例：http://www.kompagniekistemaker.nl – Riddlemethis

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

回答

相关问题