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

Question

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

$('#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'});

因此，当选中或取消选中复选框时，图标会出现或消失。可能吗？

Answer 1

不太确定这是否能回答您的问题，但您可以在输入更改时切换一个类，并处理 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/