Leaflet geoJSON sublayers checked on off

Question

I am trying to make my geoJSON sublayers enable for on/off. There are geoJSON layers filtered by property, what look like this:

    infill = L.geoJson(data2, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "Infill" );
        }
        })//.addTo(map);  //Note turned on to start map with Data, Checkbox has checked property.

     mdu = L.geoJson(data2, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
       },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "MDU" );
        }
        })//.addTo(map);    

They consist of the bigger layer as it shown in the image below:

This result comes from this code:

   //major geoJSON layer#
     document.querySelector("input[name=vm]").addEventListener('change', 
     function() { //checking the jobs in the sidebar layer 2 Virgin Media
     if(this.checked) map.addLayer(job2, infill, mdu) 
     else map.removeLayer(job2, infill, mdu)
     if(this.checked) map.addLayer(featuresLayer2)
     else map.removeLayer(featuresLayer2)
    })  
      //Infill - 1st sublayer   
     document.querySelector("input[name=infill]").addEventListener('change', 
      function() { //checking the jobs in the sidebar layer 1
      if(this.checked) map.addLayer(infill) //geoJson layer
      else map.removeLayer(infill)
      if(this.checked) map.addLayer(featuresLayer) //clustered geoJson layer
      else map.removeLayer(featuresLayer)
     })

    //MDU - 2nd sublayer
    document.querySelector("input[name=mdu]").addEventListener('change', 
    function() { //checking the jobs in the sidebar layer 2 Virgin Media
    if(this.checked) map.addLayer(mdu) 
    else map.removeLayer(mdu)
    if(this.checked) map.addLayer(featuresLayer2)
    else map.removeLayer(featuresLayer2)
    })  

There are 2 sublayers Infill and MDU that belongs to major GeoJSOn layer.

Is it possible to make them distinguished (eligible to click on-off) when the major layer in ON and all them disabled, when the major layer is OFF?

The original examples comes from here:

http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html selection layers from one geoJSON layer

http://www.gistechsolutions.com/leaflet/DEMO/sports/index.html

but unfortunately they are valid for major layers, whereas the dotted divisions are not a subject of selection.

Answer 1

To achieve desired behaviour when selecting layers, you have to take the following into account:

• To make solution independent of initial state of layers, always check status of layer with map.hasLayer method before trying to add/remove it to the map.
• Enable/disable checkbox input element for sublayers when main layer is checked/unchecked.
• Check/uncheck checkbox of input element for sublayers when main layer is checked/unchecked. Here you decide is you want them initially checked or unchecked.

So the code could then look something like this (variant with sublayers are initially checked when main layer is checked):

document.querySelector("input[name=vm]").addEventListener('change',  function() {
  if(this.checked) {
    if (!map.hasLayer(job2)) map.addLayer(job2);
    if (!map.hasLayer(infill)) map.addLayer(infill);
    if (!map.hasLayer(mdu)) map.addLayer(mdu);
    if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2);
    document.querySelector("input[name=infill]").disabled = false;
    document.querySelector("input[name=mdu]").disabled = false;
    document.querySelector("input[name=infill]").checked = true;
    document.querySelector("input[name=mdu]").checked = true;
    }
  else {
    if (map.hasLayer(job2)) map.removeLayer(job2);
    if (map.hasLayer(infill)) map.removeLayer(infill);
    if (map.hasLayer(mdu)) map.removeLayer(mdu);
    if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
    document.querySelector("input[name=infill]").disabled = true;
    document.querySelector("input[name=mdu]").disabled = true;
    document.querySelector("input[name=infill]").checked = false;
    document.querySelector("input[name=mdu]").checked = false;
  }
});

document.querySelector("input[name=infill]").addEventListener('change', function() {
  if(this.checked) {
    if (!map.hasLayer(infill)) map.addLayer(infill);
    if (!map.hasLayer(featurelayer)) map.addLayer(featuresLayer);
    }
  else {
    if (map.hasLayer(infill)) map.removeLayer(infill);
    if (map.hasLayer(featuresLayer)) map.removeLayer(featuresLayer);
   }
 });

document.querySelector("input[name=mdu]").addEventListener('change', function() {
  if(this.checked) {
    if (!map.hasLayer(mdu)) map.addLayer(mdu);
    if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2);
    }
  else {
    if (map.hasLayer(mdu)) map.removeLayer(mdu);
    if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
  }
});

Remark: Nicely indented code greatly helps in understanding the logic of code. I warmly recommend it.