Создание флажков с изображениями

Question

На данный момент мое приложение использует только простые флажки с меткой. Наш дизайнер приложений хочет, чтобы мы изменили это на интерактивные изображения, которые работают как флажок.

Вот пример:

Я не знаю, как поступить, я должен попытаться создать DIV (квадрат), заполненный с изображением, а затем установить мой текущий флажок в правом нижнем углу угол этого div?

Возможно, есть более простой способ сделать это?

Answer 1

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"); 
    }); 
}); 

Answer 2

Поместите <img> внутри элемента <label>, связанного с флажком <input> element's id. Поэтому, когда вы нажимаете на ярлык (изображение), это то же самое, что и щелчок на флажке. Затем оберните <input> и <label> внутри <div>, чтобы вы могли установить флажок в нижнем правом углу.

HTML:

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

CSS:

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

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

Вот fiddle.