Replace Checkbox by Image

Question

Replace Checkbox by Image

Navigation

#1 by (2 votes)

1

Hello, I do not know if this is the name of what I want. As you can see on this site: link When clicking on an image it is selected, I would like a similar code or one where clicking on the image the checkbox would be selected.

jquery checkbox

asked by anonymous 08.09.2015 / 18:27

1 answer

Size and position of the Bootstrap carousel on the page Define virtual field name

score 2 · Accepted Answer

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

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

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

jsFiddle: link

If you want to mark the image as in the site you refer 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: link

By the way: If the checkbox is sibling of the label, and before, just CSS only, without JavaScript:

:checked + label {
    opacity: 0.5;
}