2

boa noite gostaria de saber como posso esconder e mostrar minha div com a class clic conforme o checkbox selecionado. eu tenho varios checkbox e conforme eu selecione ou desselecione o checkbox eu quero que ele mostre o elemento e esconde caso eu desselecione. tentei do seguinte jeito:

HTML:

<div class="clic" style="display:none"></div>

jQuery:

if ($(this.checked)) {
    $(this).closest(".hovereffect").find(".clic").css("display", "block");
} else {
    $(this).closest(".hovereffect").find(".clic").css("display", "none");
}

com esse codigo eu consigo inserir o elemento mas quando desseleciono o elemento ele teria que esconder novamente a classe clic e ele nao esconde alguem poderia me ajudar?

2 Respostas 2

4

Tem um erro no seu if.

ao invés de if($(this.checked)) use if(this.checked)

Ou talvez sua intenção fosse usar o método is do jQuery: $(this).is(':checked')

2
  • obrigado cara nem tinha visto esse erro era ele mesmo vlw pela resposta 21/12/2016 às 21:42
  • Marque a resposta como aceita, por favor.
    – relaxeaza
    21/12/2016 às 21:45
2

Sugestão, já com outra resposta aceite...

$('.hovereffect :checkbox').on('change', function() {
  $(this).closest(".hovereffect").find(".clic").toggle(this.checked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hovereffect">
    <input type="checkbox">
    <div class="clic" style="display:none">Olá!</div>
</div>

Assim fica mais organizado e usas o .toggle() do jQuery.

Se o HTML o permitir até podias fazer isso só com CSS, sem jQuery... assim:

input:checked + .clic {
  display: block !important;
}
<div class="hovereffect">
  <input type="checkbox">
  <div class="clic" style="display:none">Olá!</div>
</div>

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 .