我是javascript新手,我不知道如何使用复选框进行过滤。我尝试了很多,花了太多时间,但我做不到。我要求社区提供帮助,请帮助我解决此问题。
<div id="checkbox_div">
<label>
<input type="checkbox" name="list_services" value="Apple">
Apple
</label>
<label>
<input type="checkbox" name="list_services" value="Banana">
Banana
</label>
<label>
<input type="checkbox" name="list_services" value="Orange">
Orange
</label>
</div>
这是复选框按钮,当有人检查苹果和橙子和香蕉时,它会显示其中有苹果和橙子或香蕉的列表,但是如果他/她再次取消选中其中一个(苹果,橙子和香蕉),则会删除列表中只有那些值不是该值的人。
<ul class="fruits_lists">
<li>Apple, PineApple, Apricots, Orange </li>
<li>Banana, Blueberries, Orange, Apricots </li>
<li>Apple, Cherries, Cantaloupe, Banana </li>
</ul>
答案 0 :(得分:1)
尝试一下:
var cbs = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(cb) {
cb.addEventListener("click", function() {
const listSelected = [...document.querySelectorAll('input[name="list_services"]:checked')].map(ele=>ele.value);
document.querySelectorAll('.fruits_lists li').forEach(ele=>listSelected.some(l=>ele.textContent.includes(l)) ? (ele.style.display = "block") : (ele.style.display = "none"))
});
});
<div id="checkbox_div">
<label>
<input type="checkbox" name="list_services" value="Apple">
Apple
</label>
<label>
<input type="checkbox" name="list_services" value="Banana">
Banana
</label>
<label>
<input type="checkbox" name="list_services" value="Orange">
Orange
</label>
</div>
<ul class="fruits_lists">
<li>Apple, PineApple, Apricots, Orange </li>
<li>Banana, Blueberries, Orange, Apricots </li>
<li>Apple, Cherries, Cantaloupe, Banana </li>
</ul>
答案 1 :(得分:0)
这是一个例子:
// Cache your elements up front
const checkboxContainer = document.querySelector('#checkbox_div');
const checkboxes = document.querySelectorAll('#checkbox_div input[type="checkbox"]');
const items = document.querySelectorAll('.fruits_lists li');
// Add an event listener to the checkbox container to listen
// to changes
checkboxContainer.addEventListener('change', handleChange, false);
// A function that unchecks all the checkboxes
function reset() {
checkboxes.forEach(box => box.checked === false);
}
// A function that hides all the items
function hide() {
items.forEach(item => item.classList.add('hidden'));
}
// A function that `filters` out the checkboxes that
// are selected and then `maps` over those boxes to get
// their values (into an array)
function getCheckedValues(checkboxes) {
return [...checkboxes]
.filter(box => box.checked)
.map(box => box.value);
}
// The function that is called when a change is made to
// any checkbox
function handleChange(e) {
// We get the array of values of only the checked boxes
const values = getCheckedValues(checkboxes);
// If the array is empty hide everything
if (!values.length) {
hide();
} else {
// Otherwise iterate through the items
items.forEach(item => {
// Grab the textContent from each item
const { textContent } = item;
// If all of the values are included in the textContent return true,
// otherwise false
const containsValue = values.some(value => textContent.includes(value));
// If containsValue is true set the item's display to 'block',
containsValue && item.classList.remove('hidden');
});
}
}
reset();
hide();
.hidden {
display: none;
}
<div id="checkbox_div">
<label>
<input type="checkbox" name="list_services" value="Apple">
Apple
</label>
<label>
<input type="checkbox" name="list_services" value="Banana">
Banana
</label>
<label>
<input type="checkbox" name="list_services" value="Orange">
Orange
</label>
</div>
<ul class="fruits_lists">
<li>Apple, PineApple, Apricots, Orange </li>
<li>Banana, Blueberries, Orange, Apricots </li>
<li>Apple, Cherries, Cantaloupe, Banana </li>
</ul>