Doubt with Jquery - Take class value and apply as background

Asked

Viewed 250 times

1

I need a help!!

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

I know how to do this with the click() function, but I needed you to pull the page.

I would like to take the value of the Checkbox class and apply it as 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 form checkbox

  • you want to identify the checkbox that is checked and assign a class to its label in the page load? that’s it?

  • @Dirce I couldn’t understand what you want to do, by adding the attribute checked in the checkbox it already shows the icon.

  • So guys, I want each field to have an image. Actually ta gray, but I didn’t want to put a class for each one with the image, you know? Wanted to do td in Jquery

  • I edited the code below, now this taking the images in the page loading.

  • managed to do? the solution worked?

1 answer

0

Okay, see if this is it.

$(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>

  • Could exclude the other answer then. :)

Browser other questions tagged jquery form checkbox

You are not signed in. Login or sign up in order to post.