[Solved] Creating checkboxes which include images [closed]

by


http://jsfiddle.net/pwoojpv1/

HTML

<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>

CSS

*{
    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;
}

JS

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

2

solved Creating checkboxes which include images [closed]