Question

我是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>

Answer 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>

Answer 2

这是一个例子：

// 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>

如何通过这些列表使用复选框过滤？

2 个答案: