Doubt with JQuery - Get class value and apply as background

Question

Doubt with JQuery - Get class value and apply as background

Navigation

#1 by (0 votes)

1

I need a help !!

I'm making a form and every checkbox will have an image, however I did not want to do manual by css every check, I wanted a script that I already made automatic.

I can do this with the click () function, but I needed it to pull when I loaded the page.

I would like to take the value of the Checkbox class and apply it to the label background. But I wanted a function that works for everyone.

Can someone give me a light ?? 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>

jquery checkbox

asked by anonymous 29.12.2017 / 14:28

1 answer

Laravel how to fill a select with Eloquent? Send email with attachments in php

score 0 · Answer 1

Ready, see if this is the case.

$(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><ulclass="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>