1

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 1

2

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/

3
  • 1
    Obrigado, ajudou muito ^^
    – Oliver
    Commented 8/09/2015 às 16:44
  • 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?
    – Oliver
    Commented 8/09/2015 às 16:45
  • @Oliver o que queres dizer com "Quando o dado é enviado o checkbox é desmarcado"?
    – Sergio
    Commented 8/09/2015 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .