Esta pregunta es un retoño deesta pregunta que publiqué recientemente. Me pregunto si hay una mejor manera de verificar y activar / desactivar capas al usar un control de capas personalizado.(Nota: también tengo un botón que borra todas las capas, si se presiona).

Mi control de capas personalizado (L.Control.extend) se ve así:

var overlaysMenuCtrl = L.Control.extend({
    onAdd: function(map){
        var container = L.DomUtil.create('div', 'legend');
        container.innerHTML = 
'<input type="checkbox" id="airfields" class="check">Airfields
<input type="checkbox" id="docks" class="check">Docks
... and so on ...
<button id="clearAll">Clear All Layers</button>';
return container;
 }
});

Y mi JS se ve así (para el botón clearAll):

$("#clearAll").click(function(event) {
 event.preventDefault();

$(".check").each(function(i, el) {
if (el.checked) {
  // Trigger the event.
  $(el).change();
  // Untick the checkbox.
  el.checked = false;
}
})
});

Para activar / desactivar capas:

$(".check").change(function(){
var layerClicked = $(this).attr("id");
    switch(layerClicked){
        case "airfields":
            if (map.haslayer(airfields)){
                 map.removeLayer(airfields);
            } else {
                  map.addLayer(airfields);
            }
         break;
       // ...and so on...
     }
  });

Pero, un póster sobre esa pregunta vinculada sugiere:

"podría haberlo hecho un poco más simple al leer la propiedad marcada en el cambio de entrada y eliminar / agregar la capa en consecuencia, en lugar de probar la presencia de la capa en el mapa. Con su método, puede terminar con casillas de verificación no sincronizadas ( marcado mientras que la capa se elimina del mapa y viceversa) ".

¿Alguien tiene algún consejo sobre cómo podría haber hecho esto de una manera más eficiente?