javascript - 选中复选框时如何使图像覆盖图像 Jquery

Question

您好，我正在尝试设置一个网页，如果我的客户选择某些选项，右上角会出现一个图像，当您选择选项时，它会覆盖该图像上的其他图像以向您展示最终产品。我有这段代码，我从一个示例中玩了一点，并进行了修改以使其工作，但是我坚持让它在选中复选框时显示图像和覆盖层，并在未选中时隐藏它们。

CSS:

.overlay {
    display: none;
    position: absolute;
}
#map {
    position: relative;
    border: 1px solid black;
    width: 350px;
    height: 200px;
}
#station_A { 
    top: 5px; left: 85px; 
}
.hover { 
    color: green 
}

HTML :

<div id="map">
    <span id="station_A" class="overlay"><img src="/tn_bandannatop.png>"</span>
    <span id="station_B" class="overlay">Highlight image here.</span>
</div>

<p>
    <span class="hover station_A">Station Alpha</span> is one example.

</p>      

JS :

jQuery(function() {
    jQuery('.overlay').each(function(i, el) {
        jQuery('.' + el.id)
            .mouseenter(function() { jQuery(el).css('display', 'inline') })
            .mouseleave(function() { jQuery(el).css('display', 'none') });
    });
});

更新:Fiddle is here 这是鼠标悬停设置，但我想将其更改为选中和未选中复选框的操作。

更新:为 fiddle 添加了复选框这里。暂时将鼠标悬停在代码上，以显示选中复选框时我希望它执行的操作。

Answer 1

我在这里有一些关于 JSFiddle 的东西:

http://jsfiddle.net/dynfvzsw/7/

Jquery其实很简单，你所要做的就是:

$("input[type='checkbox']").change(function() {
    var state = $(this).val();
    //
    $("#"+state).toggleClass("overlay");
}); 

然后您所要做的就是将值添加到 HTML 中的复选框中，如下所示:

<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta