mercredi 17 janvier 2018

Filter div by checkbox

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




Aucun commentaire:

Enregistrer un commentaire