I have a checkbox. I need to filter by choosing them.

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

Below the div which should be filtered

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

Below my script. But I cannot take a value of checkboxes. How should I do. Is there some methods except of a lot of if?

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

Please, help me to write the script

I have a checkbox. I need to filter by choosing them.

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

Below the div which should be filtered

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

Below my script. But I cannot take a value of checkboxes. How should I do. Is there some methods except of a lot of if?

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

Please, help me to write the script

• javascript
• html
• checkbox

• 1 Let me put in this way, as per my understanding you wanted to display div based on checkbox click,right? – Kishor Velayutham Commented Jan 17, 2018 at 11:38
• You're also trying to get classnames called 'chechbox' but your HTML says ' checkbox' , you should change that typo before you continue. – Sylent Commented Jan 17, 2018 at 11:42

3 Answers 3

Both choose and div are list of Elements, not a single Element. You need to iterate them.

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

Demo

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>

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

So you have to use element` index in order to access it. For instance,

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

I suppose you want to display div based on checkbox value. Also, you have to bind a change event handler to your checkboxes.

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>

$(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./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>