Olá, não sei se é bem isto o nome do que quero. Como vocês podem ver neste site: http://eyosongive.us/lolk/ Ao clicar em uma imagem ela é selecionada, gostaria de um código similar ou um em que ao clicar na imagem o checkbox seria selecionado.
1 Resposta
A maneira mais simples de fazer isso é somente com HTML, usando label
:
<label for="imagem1">
<img src="http://eyosongive.us/lolk/data/img/aatrox_1.jpg" alt="">
</label>
<input type="checkbox" id="imagem1" />
Dessa maneira quando clicares na imagem, que está dentro do label
, o browser vai agir da mesma forma que tivesses clicado no input diretamente.
jsFiddle: http://jsfiddle.net/yfnssLLL/
Se quiseres marcar a imagem como no site que referes podes fazer isso com CSS e 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/
Aliás: se o checkbox for sibling do label, e estiver antes, basta mesmo só CSS, sem JavaScript:
:checked + label {
opacity: 0.5;
}
jsFiddle: http://jsfiddle.net/yfnssLLL/2/
-
1
-
Ah, mas uma coisa, no caso como faço para manter o checkbox selecionado? Por exemplo: Utilizo o action="$_SERVE['PHP_SELF'"] Quando o dado é enviado o checkbox é desmarcado, como faço para manter marcado?– OliverCommented 8/09/2015 às 16:45
-
@Oliver o que queres dizer com "Quando o dado é enviado o checkbox é desmarcado"?– SergioCommented 8/09/2015 às 16:55