按复选框过滤 div

Question

我有一个复选框。我需要通过选择它们进行过滤。

<div class="filter">
    <div class="checkbox">
        <label><input type="checkbox" rel="canada"/>Canada</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="china"/>China</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="usa"/>USA</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="india"/>India</label>
    </div>
</div>

在应该被过滤的div下面

<div class="result">
    <div class="canada">
         <h1>Canada</h1>
         <h2>Jason</h2>
    </div>
    <div class="china">
         <h1>China</h1>
         <h2>Ni</h2>
    </div>
    <div class="usa">
         <h1>USA</h1>
         <h2>Micheal</h2>
    </div>
    <div class="india">
         <h1>India</h1>
         <h2>Alan</h2>
    </div>
</div>

在我的脚本下方。但我不能接受复选框的值。我应该怎么做。除了很多if，还有其他方法吗？

 <script>
        var choose = document.getElementsByClassName('chechbox');
        const div = document.getElementsByClassName('result');
        if (choose.value){
            result.style.display = "block";
        }
    </script>

请帮我写剧本

Answer 1

choose 和 div 都是元素列表，而不是单个元素。你需要迭代它们。

    var checkboxes = document.getElementsByClassName('checkbox'); 
    Array.from( checkboxes ).forEach( function( checkBox ){
       ///rest of the code
    })

演示

var checkboxes = document.querySelectorAll('[type="checkbox"]');

var fnDisplayDivs = () => {
  Array.from(checkboxes).forEach(function(checkBox) {
    var div = document.querySelector("." + checkBox.getAttribute("rel"));
    if (checkBox.checked) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  })
};

Array.from(checkboxes).forEach(function(checkBox) {
   checkBox.addEventListener( "change", function(){
      fnDisplayDivs();
   })
});
fnDisplayDivs();

<div class="filter">
  <div class="checkbox">
    <label><input type="checkbox" rel="canada"/>Canada</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="china"/>China</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="usa"/>USA</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="india"/>India</label>
  </div>
</div>

<div class="result">
  <div class="canada">
    <h1>Canada</h1>
    <h2>Jason</h2>
  </div>
  <div class="china">
    <h1>China</h1>
    <h2>Ni</h2>
  </div>
  <div class="usa">
    <h1>USA</h1>
    <h2>Micheal</h2>
  </div>
  <div class="india">
    <h1>India</h1>
    <h2>Alan</h2>
  </div>
</div>

Answer 2

getElementsByName() 方法返回文档中具有指定名称（name 属性的值）的所有元素的集合，作为NodeList 对象。

NodeList 对象代表 节点 的collection。 节点 可以通过index 数字访问。索引从 0 开始。

所以你必须使用 element` 索引才能访问它。例如，

if (choose[0].value){
        result.style.display = "block";
}

我想你想根据checkbox 值显示 div。此外，您必须将change 事件处理程序绑定到您的复选框。

function change(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
    var allAreUnselected = chekboxInputs.every(function(elem){
       return !elem.checked;
    });
    if(allAreUnselected){
       chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
              item.style.display = 'block';
          });
       });
    }
    else {
      chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
            item.style.display = input.checked ? 'block' : 'none';
          });
       });
    }
}
change();

<div class="filter">
    <div class="checkbox">
        <label><input type="checkbox" rel="canada" onchange="change()"/>Canada</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="china" onchange="change()"/>China</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="usa" onchange="change()"/>USA</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="india" onchange="change()"/>India</label>
    </div>
</div>

<div class="result">
    <div class="canada">
         <h1>Canada</h1>
         <h2>Jason</h2>
    </div>
    <div class="china">
         <h1>China</h1>
         <h2>Ni</h2>
    </div>
    <div class="usa">
         <h1>USA</h1>
         <h2>Micheal</h2>
    </div>
    <div class="india">
         <h1>India</h1>
         <h2>Alan</h2>
    </div>
    <div class="india">
         <h1>India</h1>
         <h2>Alan2</h2>
    </div>
</div>

Answer 3

$(document).ready(function(){
   $('input[type=checkbox]').change(function(){
       if($(this).is(':checked')){           $('.'+$(this).attr('rel')).css('display','block');
       }else{
       $('.'+$(this).attr('rel')).css('display','none');
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="filter">
    <div class="checkbox">
        <label><input type="checkbox" rel="canada"/>Canada</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="china"/>China</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="usa"/>USA</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" rel="india"/>India</label>
    </div>
</div>


<div class="result">
    <div class="canada" style="display:none">
         <h1>Canada</h1>
         <h2>Jason</h2>
    </div>
    <div class="china" style="display:none">
         <h1>China</h1>
         <h2>Ni</h2>
    </div>
    <div class="usa" style="display:none">
         <h1>USA</h1>
         <h2>Micheal</h2>
    </div>
    <div class="india" style="display:none">
         <h1>India</h1>
         <h2>Alan</h2>
    </div>
</div>