1

preciso de um help!!

Estou fazendo um formulário e cada checkbox vai ter uma imagem, porém eu não queria fazer manual pelo css cada check, queria um script que já fizesse automático.

Eu sei fazer isso com a função click(), mas precisava que já puxasse quando carregasse a página.

Gostaria de pegar o valor da classe do Checkbox e aplicar como background da label. Mas queria uma função que funcionasse pra todos.

Será que alguém pode me dar uma luz?? Thanks

.estilos li{ float: left; list-style: none; width: 23%; margin-right: 2%;}
	.estilos li:last-child{ margin-right: 0 }

input[type=checkbox] {
display:none;
cursor: pointer;
}
 
input[type=checkbox] + label
{

background: #ccc;
padding: 100px 0 10px;
width: 100%;
display:inline-block;	
cursor: pointer;
text-align: right;
}

input[type=checkbox] + label img{
	position: relative;
	right: 20px;
	opacity: 0;
}

input[type=checkbox]:checked + label
{
padding: 100px 0 10px;
width: 100%;
display:inline-block;		
cursor: pointer;
-webkit-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
}

input[type=checkbox]:checked + label img{
	opacity: 1
}
<ul class="estilos">
  <li>
    <input type='checkbox' name='thing' value='Teste' id="thing" class="01" />
    <label for="thing">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="02" id="thing2" />
    <label for="thing2">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="01" id="thing3" />
    <label for="thing3">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="02" id="thing4" />
    <label for="thing4">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>	
  <div class="clear"></div>
</ul>

5
  • você quer identificar o checkbox que estiver checado e atribuir uma classe ao label dele no load da pagina? é isso?
    – RBoschini
    Commented 29/12/2017 às 13:41
  • @Dirce Não consegui entender o que você quer fazer, ao adicionar o atributo checked no checkbox ele já mostra o ícone. Commented 29/12/2017 às 13:55
  • Então gente, eu quero que cada campo tenha uma imagem. Atualmente ta cinza, mas não queria colocar uma classe pra cada um com a imagem, sabe? Queria fazer td em JQuery Commented 29/12/2017 às 14:12
  • Editei o codigo abaixo, agora esta pegando as imagens no loading da pagina.
    – RBoschini
    Commented 31/12/2017 às 13:56
  • conseguiu fazer? a solucao funcionou?
    – RBoschini
    Commented 3/01/2018 às 10:37

1 Resposta 1

1

Pronto,veja se é isto mesmo.

$(document).ready(function(){
  $('input[name="thing"]').each(function(idx,key){
    var dataimg = $(key).attr('data-img');
    $(key).next().css('background','url(https://dmhxz00kguanp.cloudfront.net/fotos/'+dataimg+')');
  
  });

});
.estilos li{ float: left; list-style: none; width: 23%; margin-right: 2%;}
	.estilos li:last-child{ margin-right: 0 }

input[type=checkbox] {
display:none;
cursor: pointer;
}
 
input[type=checkbox] + label
{

background: #ccc;
padding: 100px 0 10px;
width: 100%;
display:inline-block;	
cursor: pointer;
text-align: right;
}

input[type=checkbox] + label img{
	position: relative;
	right: 20px;
	opacity: 0;
}

input[type=checkbox]:checked + label
{
padding: 100px 0 10px;
width: 100%;
display:inline-block;		
cursor: pointer;
-webkit-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.75);
}

input[type=checkbox]:checked + label img{
	opacity: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="estilos">
  <li>
    <input type='checkbox' name='thing' value='Teste' id="thing" data-img="79314/media_kit-berco-chapeuzinho-vermelho-almofadas-de-brincar-176688.webp" class="01" />
    <label for="thing">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="02" id="thing2" data-img="81467/media_kit-berco-amiguinhos-181596.webp"/>
    <label for="thing2">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="01" id="thing3" data-img="83379/media_quarto-de-bebe-ursinha-bebe-186658.webp"/>
    <label for="thing3">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>

  <li>
    <input type='checkbox' name='thing' value='Teste' class="02" id="thing4" data-img="83379/media_quarto-de-bebe-ursinha-bebe-186658.webp"/>
    <label for="thing4">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" width="36">
    </label> 						
  </li>	
  <div class="clear"></div>
</ul>

1
  • Poderia excluir a outra resposta então. :)
    – Sam
    Commented 30/12/2017 às 21:02

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 .