educative.io

Educative

Check box filtering


how can i add multiple images on checking one checkbox using loop


Course: Introduction to JavaScript: First Steps - Free Interactive Course
Lesson: Introduction - Just Get Started - Introduction to JavaScript: First Steps

Hi @Asma_Ismail,

Thank you so much for reaching out to us. Since your question has different perspectives for me.

I tried my best of provide you the solution you are looking for, which is

<html> 
    <head>

    </head>
    <body> 
        <div>
            <div>
                <input type="checkbox" name="image" onchange="updateImages()"/> Car 
            </div>
            <div>
                <input type="checkbox" name="image" onchange="updateImages()"/> Bike 
            </div>
            <div>
                <input type="checkbox" name="image" onchange="updateImages()"/> Bus 
            </div>
        </div>
        <span id="imagePlacer">

        </span>
        <script>  
            function updateImages() {
                var images = [["car1.jpeg", "car2.jpg"], ["bike1.jpeg", "bike2.jpg"], ["bus1.jpeg", "bus2.jpg"]];
                var checkboxs = document.getElementsByName("image"); 
                document.getElementById("imagePlacer").innerHTML = "";
                for(var checkboxIndex = 0; checkboxIndex < checkboxs.length; checkboxIndex += 1){
                    if(checkboxs[checkboxIndex].checked == true){
                        for(var imageIndex = 0; imageIndex < images[checkboxIndex].length; imageIndex += 1){
                            document.getElementById("imagePlacer").innerHTML += "<img src=" + images[checkboxIndex][imageIndex] + ">";  
                        }
                    }
                } 
            }  
        </script>  
    
    </body>  
</html>  

But if I am missing something, please do let me know. Thanks.