带复选框JavaScript的多条件过滤

Question

我正在尝试创建一个由复选框触发的过滤器，它显示和隐藏列表中的选项。我曾尝试在线使用资源将脚本放在一起，但似乎没有任何效果。

为了隐藏或显示列表项 我正在编辑一个 - class =“marker”父元素 基于其子元素的wether - class =“condtx” 是否匹配复选框“值”的数组。

我已经包含了关于我如何进行的评论。

有人能指出我正确的方向吗？

function filterCondtn1() {
  var i, z;

  //"chekedVal" array Keeps returning "undefined" I have no idea why

  var chekedVal = document.getElementById("InputOpts").getElementsByTagName("input").checked.value;

  //Gathered all <h3> tag options into array to be tested against "chekedVal" for match

  var condt1 = document.getElementsByClassName("condtn1").innerHTML;

  //Parrent class that will be edited to show <div> or not if True or false.

  var parrentClss = document.getElementsByClassName("marker");

  //From here it's a blur. I've trying everything I can. I think I should be something of that sort.

  for {
    (var i = 0; i < condt1.length; i++) &&
    (var z = 0; z < parrentClss.length; z++)
    RemoveClass(parrentClss[z], "show");
    if (condt1[i].indexOf(chekedVal) > -1) AddClass(parrentClss[z], "show");
  }
}

//Currently using these two functions in my script and they work

function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

.markerA {
  display: none;
}

.show {
  display: block;
}

<div id="InputOpts">
  <input type="checkbox" value="option 1" oninput="filterCondtn1();">Option 1
  <input type="checkbox" value="option 2" oninput="filterCondtn1();">Option 2
  <input type="checkbox" value="option 3" oninput="filterCondtn1();">Option 3
  <input type="checkbox" value="option 4" oninput="filterCondtn1();">Option 4
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="condtn1">Option 1</h3>
  </div>
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="condtn2">Option 3</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="condtn1">Option 2</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="condtn2">Option 4</h3>
  </div>
</div>

Answer 1

利用您的onInput功能。这可以用很少的代码来完成。您可以直接抓取元素而无需循环选中复选框和父元素。您还可以添加直接样式，而无需通过添加css类的废话。

我不是100％肯定你想要的，所以这里有两个例子。

如果要隐藏所选选项：

function filterCondtn1(event) {
  var element = event.target
  var condt1 = document.getElementsByClassName("option")
  for (var i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[i].parentElement.style = "display:none"
      } else {
        condt1[i].parentElement.style = "display:block"
      }
    }
  }
}

<div id="InputOpts">
  <input type="checkbox" value="option 1" oninput="filterCondtn1(event);">Option 1
  <input type="checkbox" value="option 2" oninput="filterCondtn1(event);">Option 2
  <input type="checkbox" value="option 3" oninput="filterCondtn1(event);">Option 3
  <input type="checkbox" value="option 4" oninput="filterCondtn1(event);">Option 4
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 1</h3>
  </div>
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 3</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 2</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 4</h3>
  </div>
</div>

如果您只想显示所选选项：

function filterCondtn1(event) {
  var element = event.target
  var condt1 = document.getElementsByClassName("option")
  for (var i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[i].parentElement.style = "display:block"
      } else {
        condt1[i].parentElement.style = "display:none"
      }
    }
  }
}

.marker > .necessary {
  display: none;
}

<div id="InputOpts">
  <input type="checkbox" value="option 1" oninput="filterCondtn1(event);">Option 1
  <input type="checkbox" value="option 2" oninput="filterCondtn1(event);">Option 2
  <input type="checkbox" value="option 3" oninput="filterCondtn1(event);">Option 3
  <input type="checkbox" value="option 4" oninput="filterCondtn1(event);">Option 4
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 1</h3>
  </div>
</div>

<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 3</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 2</h3>
  </div>
</div>
<div class="marker">
  <div class="necessary">
    <h3 class="option">Option 4</h3>
  </div>
</div>

Answer 2

function selectOption(self){
  const value = self.value;
  unCheckPreviousOption(value);
  const element = document.getElementsByClassName(value)[0];
  element.classList.remove('marker');
  element.classList.add('show');
}

function unCheckPreviousOption(currentCheckbox){
  uncheckCheckboxes(currentCheckbox);
  const elementsDisplayed = document.getElementsByClassName('show');
  if(elementsDisplayed.length){
    [...elementsDisplayed].forEach((el) => {
      el.classList.remove('show');
      el.classList.add('marker');
    });
  }
}

function uncheckCheckboxes(currentCheckbox){
  const checkboxes = document.getElementsByTagName('input');
  if(checkboxes.length){
    [...checkboxes].forEach((el) => {
      if(el.checked && el.value !== currentCheckbox){
        el.checked = !el.checked;
      }
    });
  } 
}

.show { 
  display: block;
}

.marker { 
  display: none;
}

<div id="InputOpts">
  <input type="checkbox" onChange="selectOption(this)" value="one">Option 1
  <input type="checkbox" onChange="selectOption(this)" value="two">Option 2
  <input type="checkbox" onChange="selectOption(this)" value="three">Option 3
  <input type="checkbox" onChange="selectOption(this)" value="four">Option 4
</div>

<div class="marker one">
  <div class="necessary">
    <h3 class="condtn1">Option 1</h3>
  </div>
</div>

<div class="marker three">
  <div class="necessary">
    <h3 class="condtn2">Option 3</h3>
  </div>
</div>
<div class="marker two">
  <div class="necessary">
    <h3 class="condtn1">Option 2</h3>
  </div>
</div>
<div class="marker four">
  <div class="necessary">
    <h3 class="condtn2">Option 4</h3>
  </div>
</div>

这可能会帮助你，这是实现你想做的事情的另一种方式。