Javascript 创建包含图像的复选框

目前，我的应用程序只使用带有标签的简单复选框。我们的应用程序设计师希望我们将其更改为可点击的图像，其工作方式类似于复选框

这里有一个例子：

我不知道如何继续，我应该尝试创建一个充满图像的div（正方形），然后在该div的右下角设置当前复选框吗

或者有更简单的方法

将

放入绑定到复选框

元素的

id

的

元素中。因此，当您单击标签（图像）时，与单击复选框相同。然后将

和

包装在

内，以便将复选框放置在右下角

HTML:

这是一个例子。

HTML

JS

---

“可访问的自定义复选框”；）添加关键字accessible总是会带来更好的语义和更好的代码（结果更少，但这并不总是一个问题）编辑：gasp演示在Medit2有一些服务器问题：新链接谢谢Joseph，这正是我想要的！将此与我的angular JS代码混合使用，效果很好！！我很高兴能帮上忙

<div class="container">
    <input id="checkbox1" type="checkbox" />
    <label for="checkbox1">
        <img src="http://i.imgur.com/rpUZ96Y.jpg" />
    </label>
</div>

<div class="container">
    <input id="checkbox2" type="checkbox" />
    <label for="checkbox2">
        <img src="http://i.imgur.com/fKRGSmS.jpg" />
    </label>
</div>

.container {
    display: inline-block;
    font-size: 0;
    position: relative;
}

.container input {
    bottom: 0;
    position: absolute;
    right: 0;
}

<div class="check-img" style="width:100px;height:100px;">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/883px-Tux.svg.png" >
    <div class="check">&check;</div>    
</div>

*{
    box-sizing:border-box;
}
.check-img{
    position:relative;
    top:0px;
    left:0px;
}
.check-img img{
    border:solid 2px gray;
    width:100%;
    height:100%;
    cursor:pointer;
}
.check{
    padding-left:5px;
    color:grey;

    height:20px;
    width:20px;
    background:grey;

    position:absolute;
    bottom:0px;
    right:0px;
}
.check-img.checked img{
    border-color:orange;
}
.check-img.checked .check{
    background:orange;
    color:white;
}

$(document).ready(function(){
    $(".check-img").click(function(){
        $(this).toggleClass("checked"); 
    });
});