使用复选框简化在自定义控件中打开和关闭图层的过程？

这个问题是我最近发布的这个问题的背叛 。 我想知道在使用自定义图层控件时是否有更好的方法来检查和切换图层。 （注意：如果按下，我还有一个清除所有图层的按钮。）

我的自定义图层控件（L.Control.extend）如下所示：

var overlaysMenuCtrl = L.Control.extend({ onAdd: function(map){ var container = L.DomUtil.create('div', 'legend'); container.innerHTML = 'Airfields Docks ... and so on ... Clear All Layers'; return container; } }); 

我的JS看起来像是这样（对于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; } }) }); 

对于关闭/打开图层的方法：

 $(".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... } }); 

但是，上面这个相关问题的海报表明：

“通过在输入更改时读取checked属性并相应地删除/添加图层，而不是在地图上测试图层存在，您可以稍微简化一下。使用您的方法，您最终可能会出现不同步的复选框（勾选，而图层从地图中删除，反之亦然）。“

有没有人有任何关于如何以更有效的方式做到这一点的提示？

Answer 1

 $("#clearAll").click(function(event) { event.preventDefault(); $(".check").each(function(i, el) { el.checked = false; // Set new status (unchecked) first. $(el).change(); // Trigger the event. }) }); $(".check").change(function() { var layerClicked = $(this).attr("id"); switch (layerClicked) { case "airfields": toggleLayer(this.checked, airfields); break; case "docks": toggleLayer(this.checked, docks); break; // ...and so on... } }); function toggleLayer(checked, layer) { if (checked) { map.addLayer(layer); } else { map.removeLayer(layer); } } 

演示： http ： //jsfiddle.net/3v7hd2vx/53/