topic Re: Turn on all or turn off all Checkboxes in ArcGIS JavaScript Maps SDK Questions

Turn on all or turn off all Checkboxes

jaykapalczynski — Sat, 11 Dec 2021 12:27:17 GMT

I have an accordion style section that contains content panes with layers inside them for the user to turn on and off

As seen below there are 5 content panes

I am building a layer list that has checkboxes built on the fly with JavaScript.

I am using this on each FeatureLayer to determine which one it goes into:

legendLayers4.push({ layer: RailYards, title: 'Rail Yards' });

I added a button to the each of their content panes to be used to check all boxes or uncheck all boxes

What I am trying to do now is turn on all layers in that specific content pane by clicking the BUTTON or turning them all off by clicking the same BUTTON

I can handle all the little stuff but just cant see to get control of them in Javascript....

How do I test each checkbox...I can return their Layer title and Layer ID etc but can seem to be able to get the actual checkbox reference to test if it is checked or not...If I can get that far I can handle the button etc

I am trying to get to the individual checkboxes in document.getElementById("FeaturesButton").onclick = function () {

You can see below that I am looping trough the legendLayers4 and creating a checkbox and label for each checkbox to be created.

<div id="IDAccordionPaneLayers" data-dojo-type="dijit.layout.AccordionContainer" style="color:black; height:50%; width:90%;">                    
     
<!-- SNIP  -->

        <div id="idLayers4" data-dojo-type="dijit.layout.ContentPane"  data-dojo-props="title:'Features'" selected="true" >
          <button type="button" id="FeaturesButton" style="float: right;" >Click Me!</button>
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Natural Disasters'">
               <div id="toggle4" style="padding: 2px 2px; color:Black;"></div>
          </div>
     </div>     

<!-- SNIP  -->
               
</div>     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

// ON EACH LAYER I SPECIFY WHICH LEGEND LAYER I WANT IT TO GO TO

legendLayers4.push({ layer: RailYards, title: 'Rail Yards' });     




arrayUtils.forEach(legendLayers4, function (layer) {
     var layerName = layer.title;
     var checkBox = new CheckBox({
          name: "checkBox" + layer.layer.id,
          value: layer.layer.id,
          checked: layer.layer.visible
     });
     checkBox.on("change", function () {
          var targetLayer = map.getLayer(this.value);
          targetLayer.setVisibility(!targetLayer.visible);
          this.checked = targetLayer.visible;
     });
     //add the check box and label to the toc
     domConstruct.place(checkBox.domNode, dom.byId("toggle4"), "after");
     var checkLabel = domConstruct.create('label', {
          'for': checkBox.name,
          innerHTML: layerName
          }, checkBox.domNode, "after");
     domConstruct.place("<br />", checkLabel, "after");
});     


document.getElementById("FeaturesButton").onclick = function () { 

     arrayUtils.forEach(legendLayers4, function (layer) {
                    
          var layerName = layer.title;
          //alert (layerName);
                    
          var layerID = layer.layer.id;
          //alert(layerID);
                    
          var i;
          for (i = 0; i < layerID.length; i++) {
               //myNodelist.style.backgroundColor = "red";
               alert(layerID);
          }

     });     
               
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Turn on all or turn off all Checkboxes

jaykapalczynski — Sat, 11 Dec 2021 12:27:20 GMT

I can test to determine if the checkbox is checked but for some reason I CANNOT get it to check it if its not checked

This is what I see in the ELEMENTS of the page

trying a couple different ways to check it....but not working.

it alerts "not checked" but does not check the box with any of the below calls:

document.getElementsByName("FisheriesBiologist").checked = true;
document.getElementsByName("checkBoxFisheriesBiologist").checked = true;
document.getElementById("dijit_form_CheckBox_19").checked = true;

document.getElementById("DGIFFeaturesButton").onclick = function () { 

    arrayUtils.forEach(legendLayers4, function (layer) {
                    
     var layerName = layer.title;
     //alert (layerName);
                    
     var layerID = layer.layer.id;
     //alert(layerID);
                    
     var test = layerID;

     switch (test){
        case "FisheriesBiologist":
          alert("Fisheries Biologist");                         
          if (dijit_form_CheckBox_19.checked == true){     
               alert("checked");
          } else {
              document.getElementsByName("checkBoxFisheriesBiologist").checked == true;
              document.getElementById("dijit_form_CheckBox_19").checked = true;
              alert(" not checked");                         
             }                                                  
          break;

// SNIP‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Turn on all or turn off all Checkboxes

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:27:22 GMT

cb = registry.byId("dijit_form_CheckBox_19");
//toggle the checkbox
cb.set("checked", !cb.checked);‍‍‍‍‍‍

Re: Turn on all or turn off all Checkboxes

jaykapalczynski — Tue, 04 Dec 2018 16:43:04 GMT

Thank you once again.

Re: Turn on all or turn off all Checkboxes

jaykapalczynski — Tue, 04 Dec 2018 16:47:40 GMT

Is there a faster way to loop through the checkboxes and just turn them all on instead of using a switch to check each one individually?

Re: Turn on all or turn off all Checkboxes

jaykapalczynski — Tue, 04 Dec 2018 18:49:27 GMT

Would it be the below to uncheck them? Used to using a False or True statement

cb.set("checked" , !cb.unchecked)

Re: Turn on all or turn off all Checkboxes

jaykapalczynski — Tue, 04 Dec 2018 18:53:59 GMT

see that its a toggle...seems to be working for turning on and off...just not seeing where it defaults to turn everything on the first time.

Re: Turn on all or turn off all Checkboxes

RobertScheitlin__GISP — Tue, 04 Dec 2018 18:54:25 GMT

Jay,

No not at all, use false.

Re: Turn on all or turn off all Checkboxes

RobertScheitlin__GISP — Tue, 04 Dec 2018 18:57:11 GMT

If you do not want to toggle the visibility. then just use true or false.