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>