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
how can i add multiple images on checking one checkbox using loop
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.