Replace Checkbox with Image

Question

Hey, I don’t know if this is what I want. As you can see on this site: http://eyosongive.us/lolk/ When clicking on an image it is selected, I would like a similar code or one where when clicking on the image the checkbox would be selected.

Answer 1

The simplest way to do this is only with HTML, using label:

<label for="imagem1">
    <img src="http://eyosongive.us/lolk/data/img/aatrox_1.jpg" alt="">
</label>
<input type="checkbox" id="imagem1" />

That way when you click on the image, which is inside the label, the browser will act the same way you clicked the input directly.

jsFiddle: http://jsfiddle.net/yfnssLLL/

If you want to mark the image as on the referral site you can do this with CSS and Javascript.

CSS:

.selecionada {
    opacity: 0.5;
}

jQuery

$('input').on('change', function () {
    $('label[for="' + this.id + '"]')[this.checked ? 'addClass' : 'removeClass']('selecionada');
});

jsFiddle: http://jsfiddle.net/yfnssLLL/1/

Incidentally: if the checkbox is sibling from the label, and is before, just CSS, without Javascript:

:checked + label {
    opacity: 0.5;
}

jsFiddle: http://jsfiddle.net/yfnssLLL/2/