Linking MapImageLayer, Sublayers to checkboxes in a sidebar

[LeonDavis]

Hi there, 

I'm currently working with this example to attempt to link MapIMageLayer - Sublayers to checkboxes instead of button divs as per the example

MapImageLayer - Toggle sublayer visibility | Sample Code | ArcGIS API for JavaScript 4.25 | ArcGIS D...

I can get the first checkbox working but the others are unresponsive. I have simply tried to replicate their code using Li checkbox inputs rather than Button Div inputs

heres a pen of my attempts

A Pen by Leon (codepen.io)

any help is really appreciated, it's been a while...  :')

Best,

Leon

[JoelBennett · Accepted solution]

The problem is that querySelector only returns the first matching element, but you want all matching elements.  Instead, you can use querySelectorAll.  The last part would then go something like this instead:

        const sublayersElements = document.querySelectorAll(".list_item");
        for (var x = 0; x < sublayersElements.length; x++) {
          sublayersElements[x].addEventListener("click", (event) => {
            const id = event.target.getAttribute("data-id");
            if (id) {
              const sublayer = layer.findSublayerById(parseInt(id));
              const node = document.querySelector(".list_item[data-id='" + id + "']");
              sublayer.visible = !sublayer.visible;
              node.classList.toggle("visible-layer");
            }
          });
        }

[LeonDavis]

Hi Joel,

Thanks so much for this, that makes sense. 

I wish you a great week 

Best,

Leon