JavaScript remove Leaflet layer when checkbox is unchecked

Question

I have an JS object where the 1st value of each key is the checkbox id, 2nd is the API where the data is and the 3rd is the color

var layers={childcares: ["#childcares",'http://127.0.0.1:8000/childcare_data/','orange'], childcare_buff: ["#childcaresbuff","http://127.0.0.1:8000/childcare_buff_data/","orange"],
            religious: ["#religious","http://127.0.0.1:8000/religious_data/","blue"], religious_buff: ["#religiousbuff","http://127.0.0.1:8000/religious_buff_data/","blue"],
            park: ["#parks","http://127.0.0.1:8000/park_data/","green"],park_buff: ["#parksbuff","http://127.0.0.1:8000/park_buff_data/","green"],
            school: ["#schools","http://127.0.0.1:8000/school_data/","red"],school_buff: ["#schoolsbuff","http://127.0.0.1:8000/school_buff_data/","red"]
            };

now I have these two functions

    function color(feature, color_chosen, opacity){
        return{
        color: color_chosen,
        fillOpacity: opacity}
       };

this color one above is fairly simple and just sets the color

the legend_click one is where I am getting problems

    function legend_click(id,layer_api,color_layer) {
        $(id).click(function () {
          var layer_add=new L.GeoJSON.AJAX(layer_api,{
            style: color(layer_add,color_layer,0.8),
            onEachFeature: function(feature,layer_add){
             layer_add.bindPopup('<b>Buffer Type</b> = ' +feature.properties.buff+ '<br>'
                            +'<b>Address</b> = '+feature.properties.address+ '<br>' +'<b>Buffer Distance</b> = '+feature.properties.buff_dist)
                    }
                   }
                );
            if ($(id).prop('checked')==true) {
                layer_add.addTo(map);
                //map.fitBounds(layer_add.getBounds())
            }
            else if ($(id).prop('checked')==false) {
                console.log('noury') 
                map.removeLayer(layer_add);
            }
        })
    };

looping through the layers like this

for (var key in layers){
        console.log(layers[key])
        legend_click(layers[key][0],layers[key][1],layers[key][2])
    };

so in the map when I click on the checkbox the layer correctly gets added to the display but when I uncheck the checkbox is it throws NO error and prints out noury to the console but it does not remove the layer...

Answer 1

As I suggested in my comment, this could be one way of doing it:

var idArray = [];
var layerArray = [];

function legend_click(id, layer_api, color_layer) {
    $(id).click(function () {
        var layer_add;
        var i = idArray.indexOf(id);
        if (i < 0) {
          layer_add = new L.GeoJSON.AJAX(layer_api,{
            style: color(layer_add, color_layer, 0.8),
            onEachFeature: function(feature, layer_add){
              layer_add.bindPopup('<b>Buffer Type</b> = ' + feature.properties.buff + '<br>'
                            +'<b>Address</b> = ' + feature.properties.address+ '<br>' + '<b>Buffer Distance</b> = ' +feature.properties.buff_dist)
              }
            }
          );
          layerArray.push(layer_add);
          idArray.push(id);
          }
        else {
          layer_add = layerArray[i];
        };
        if ($(id).prop('checked') == true) {
          layer_add.addTo(map);
          }
        else if ($(id).prop('checked') == false) {
          map.removeLayer(layer_add);
        }
    })
};

Answer 2

This might help, it's a little different then your but works well. I use it in a sidebar or panel. Basically create a label and checkbox, in my case for the hospital layer called hosp. Note I used a "name" id.

The HTML checkbox:

<label class="container">Hospitals
    <input type="checkbox"  id="hosp" name="hosp" value="hosp"  >
</label>

The JavaScript that adds and adds/removes the layer from the map as checked or not.

document.querySelector("input[name=hosp]").addEventListener('change', function() {
    if(this.checked) map.addLayer(hosp)
      else map.removeLayer(hosp)
    })

remember to set the value to checked it you add it to the map on load, in my example, it's off.

Example: http://www.gistechsolutions.com/leaflet/DEMO/baseball/sports/sports.html