取消选中并选中开关盒中的复选框

问题描述：

当选中或取消选中复选框时，我希望图标出现或消失。下面我展示了图标url路径的外观。有什么办法可以做到吗？我一直在试图自己将这段代码添加到开关盒中，但我是一个js初学者，我不知道我做错了什么。取消选中并选中开关盒中的复选框

$('#someId').change(function() { 

     if(this.checked) { 
      $(icon = greenIcon).show(1); 
     } 
     else { 
      $(icon = greenIcon).hide(1); 
     } 

    }); 

    $('#someId2').click(function() { 

     if(this.checked) { 
      $(icon = yellowIcon).show(1); 
     } 
     else { 
      $(icon = yellowIcon).hide(1); 
     } 

    }); 

    $('#someId3').click(function() { 

     if(this.checked) { 
      $(icon = redIcon).show(1); 
     } 
     else { 
      $(icon = redIcon).hide(1); 
     } 

    }); 

    $('#someId4').click(function() { 

     if(this.checked) { 
      $(icon = blueIcon).show(1); 
     } 
     else { 
      $(icon = blueIcon).hide(1); 
     } 

    });

这个

switch (feature.properties.status) { 
     case 0: 
      icon = greenIcon; break; 
     case 1: 
     case 11: 
     case 12: 
      icon = yellowIcon; break; 
     case 2: 
     case 21:  
     case 22:  
      icon = redIcon; break; 
     case 5: 
     default: 
      icon = blueIcon; break; 
}

图标将被添加到这样的代码：

var greenIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-ok.png'}); 
var redIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-err.png'}); 
var yellowIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-warn.png'}); 
var blueIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-sleep.png'});

因此，当一个复选框被选中或取消选中，图标会出现或dissappear。可能吗？

如果我理解正确的话（因为我不熟悉的传单等），你要检查的复选框是否被选中或不'变化（） “勾号”复选框？你想使用开关来确定显示哪个图标？ – Jorrex

@Jorrex对于这样一个迟到的回复感到抱歉，我试图用复选框隐藏和显示我地图上的图标。这对我来说很难，因为图标是在js中，而不是在html或css中。我试图用开关盒进入他们，但它不会帮助...我也有一个想法。我会尝试在开关盒内创建一个div，但是我所有的尝试都失败了。我不知道该怎么做，因为这里的所有答案都不能帮助我。 – Sazaj

答

不太清楚，如果这个回答你的问题，但你可以切换一个类时输入的变化，并处理在css/sass中显示的内容。

简单的例子：

$('.checkboxInput').change(function(){ 
    $(this).parent().toggleClass('showIcon'); 
    alert('Is the checkbox checked? This is ' + $(this).prop('checked')); 
});

https://jsfiddle.net/Airrudi/ffvmgebe/1/

答

没有switch语句怎么样？数据属性做这将使它更容易在以后添加的东西（在我看来）

https://jsfiddle.net/stevenkaspar/v43egwdx/1/

<input data-icon-target='#i_1' data-has-icon='true' checked type='checkbox'/> 
<span class='icon' id='i_1'>icon 1</span> 

$('[data-has-icon="true"]').click(function(event){ 
    var target_id = $(this).data('iconTarget'); 
    $(target_id).toggleClass('hidden'); 
})

取消选中并选中开关盒中的复选框

相关推荐