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.
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>IDAccordionPaneLayers<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.AccordionContainer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>black<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>50%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>90%<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- SNIP --></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>idLayers4<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Features<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">selected</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>true<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>FeaturesButton<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN> right<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>Click Me!<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/layout/ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Natural Disasters<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>toggle4<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 2px 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN>Black<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- SNIP --></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
<SPAN class="comment token">// ON EACH LAYER I SPECIFY WHICH LEGEND LAYER I WANT IT TO GO TO</SPAN>
legendLayers4<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> RailYards<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Rail Yards'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers4<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> checkBox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CheckBox</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"checkBox"</SPAN> <SPAN class="operator token">+</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
value<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN>
checked<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>visible
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
checkBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> targetLayer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
targetLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibility</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> targetLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//add the check box and label to the toc</SPAN>
domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"toggle4"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> checkLabel <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">'for'</SPAN><SPAN class="punctuation token">:</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">,</SPAN>
innerHTML<SPAN class="punctuation token">:</SPAN> layerName
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> checkBox<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<br />"</SPAN><SPAN class="punctuation token">,</SPAN> checkLabel<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"after"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"FeaturesButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers4<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> layerName <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//alert (layerName);</SPAN>
<SPAN class="keyword token">var</SPAN> layerID <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//alert(layerID);</SPAN>
<SPAN class="keyword token">var</SPAN> i<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> layerID<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">//myNodelist<I>.style.backgroundColor = "red";</I></SPAN>
<SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN>layerID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
