如何使用複選框過濾多個列表項目？

如何創建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

如何使用複選框過濾多個列表項目？

回答

相關問題