How to create checkbox list with Dojo?

Question

I am consuming a ArcGis services to create a, let's call it, "Simple WebGis".

At one part I want to take all FeatureLayers and create a table of contents with checkboxes to switch the layer visibility on and off. As a result all layers are displayed as text but the checkboxes are missing and I don't get a javascript error indicating where my fault is located.

This is the code in question:

 var map;
 var tocLayers = [];
 require([
            "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
            "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
          ], function (
            Map, FeatureLayer, Legend,
            arrayUtils, parser, dom, construct, CheckBox
          ) {
              parser.parse();
              window.infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
              map = new Map("map", {
                  basemap: "topo",
                  center: [8.7, 50.0],
                  zoom: 10
              });

              //defining layers here - omitted         

              tocLayers.push({ layer: noll, title: 'Layer1' });
              tocLayers.push({ layer: eins, title: 'Layer2' });
              tocLayers.push({ layer: zwei, title: 'Layer3' });
              tocLayers.push({ layer: drei, title: 'Layer4' });
              tocLayers.push({ layer: vier, title: 'Layer5' });
              tocLayers.push({ layer: fuenf, title: 'Layer6' });
              tocLayers.push({ layer: sechs, title: 'Layer7' });
              tocLayers.push({ layer: sieb, title: 'Layer8' });

              //add the legend - omitted

              //add check boxes 
              map.on('layers-add-result', function (results) {
                  arrayUtils.forEach(tocLayers, function (layer) {
                      var layerName = layer.title; console.log(layer.title);
                      var checkBox = new CheckBox({
                          name: "checkBox" + layer.layer.id,
                          value: layer.layer.id,
                          checked: layer.layer.visible,
                          onChange: function (evt) {
                              var clayer = map.getLayer(this.value);
                              clayer.setVisibility(!clayer.visible);
                              this.checked = clayer.visible;
                          }

                      });
                      //add the check box and label to the toc
                      construct.place(checkBox.domNode, dom.byId("toggle"), "after");
                      var checkLabel = construct.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
                      construct.place("<br />", checkLabel, "after");
                  });
              });

              map.addLayers([noll, eins, zwei, drei, vier, fuenf, sechs, sieb]);

          });

Related markup:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Table of Contents'">
    <span style="padding:10px 0;">LayerVisibility</span>
    <div id="toggle" style="padding: 2px 2px;"></div>

Upon looking at the rendered markup is see this:

<div class="dijitBorderContainer dijitContainer" id="dijit_layout_BorderContainer_2" widgetid="dijit_layout_BorderContainer_2" style="padding: 0px;"></div>
<label for="checkBoxgraphicsLayer3">Layer3</label>

It is not possible for me to give provide you with a fiddle, since the data which is being consumed is password protected. Hopefully I just messed up my code at some point.

Question/problem: Why are the checkboxes not displayed in the markup, but the titles of the layers and how can I fix this?

Answer 1

The error was located at the beginning in my require() function.

Original:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
         "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

After removing all the fideling I moved in, while trying fit the requirements it looked like this:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/form/CheckBox","dojo/domReady!"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

And the checkboxes are rendered flawlessly.

Answer 2

Usually when I create widget programmatically, I provide the DOM node immediately, for example:

var checkBox = new CheckBox({
    name: "checkBox" + layer.layer.id,
    value: layer.layer.id,
    checked: layer.layer.visible,
    onChange: function (evt) {
        var clayer = map.getLayer(this.value);
        clayer.setVisibility(!clayer.visible);
        this.checked = clayer.visible;
    }

}, construct.create("input", null, "toggle", "after"));

That might work for you as well. You don't need to place it afterwards (so the line below it can also be removed).