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

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

NodeList对象代表{{1>}个节点。可以通过collection号码访问节点。索引从0开始。

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

index

我想你想根据if (choose[0].value){ result.style.display = "block"; }值显示div。此外，您必须将checkbox事件处理程序绑定到您的复选框。

＆＃13;

change

＆＃13;

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();

＆＃13;

Answer 2

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

按复选框过滤div

3 个答案: