Javascript 复选框逻辑在打开的层js文件中不起作用

在我的代码中，我有两个网格用于基础层，另一个用于实用层。 基本层有单选按钮，点击使用的逻辑正在工作

{

    var baseLayerGroup= new ol.layer.Group({
    layers:[
        openstreetmapstandard,openstreetmaphumanitarian
    ]
})
map.addLayer(baseLayerGroup);

//Layer Switcher Logic for Baselayer
var baseLayerElements = document.querySelectorAll('.sidebar1 > input[type=radio]');
for(let baseLayerElement of baseLayerElements){
    baseLayerElement.addEventListener('change',function(){
        let baseLayerElementValue = this.value;
        baseLayerGroup.getLayers().forEach(function(element, index, array){
            let baseLayerTitle = element.get('title');
            element.setVisible(baseLayerTitle === baseLayerElementValue);        
        })
    })
}
var dataLayerGroup= new ol.layer.Group({
    layers:[
        Sector_office,Roads
    ]
})

我对复选框的逻辑是：

Sector_office.setVisible(true);
Roads.setVisible(false);
var toggleLayer = function(inputEl){
     map.getLayers().forEach(function(layer){
          if (layer.get('name') === inputEl.name)
          layer.setVisible(inputEl.checked);
          });
        };
map.addLayer(dataLayerGroup);

但是我的复选框逻辑不起作用，这是我的html页面

   <input type="checkbox" onClick="toggleLayer(this);" value="Sector_office" checked>Sector office<br> 
    <input type="checkbox" onClick="toggleLayer(this);" value="Roads" checked>Roads<br>
  </div>

---

据我所知，您的代码中有几个问题

在处理函数中，您引用的是dom元素的name属性，但我在html中没有看到这样的属性。结果总是错误的。因此，您必须设置name属性或使用value属性

onclick事件处理程序将MouseeEvent参数作为参数接收。要在处理程序中获取dom元素的引用，可以使用此属性，也可以使用事件参数属性target

恢复,

处理者

常量切换层=函数{ 常数chk=e.target。 map.getLayers.forEachfunctionlayer{ 如果layer.get'name'==chk.value layer.setVisiblechk.checked； }; }; html

部门办公室 道路