Use Images instead of radio button and get the checked value and pass it to a h2 tag

niceoneishere
niceoneishere used Ask the Experts™
on
Hi There,

I am using images to display radio buttons, but I am running into  trouble in getting the checked value and passing to a label. I am able to click on a image and set the radio button to checked, but if I click any another image, this images radio button also gets checked so now I have 2 radio buttons checked, I only want the one with the image selected and pass that value to h2 tag. Here is link for jfiddle showing a demo

jFiddle Demo

here is my code

<ul id="thumbnails1" class="noul swatch-colors">
<li><label class="lbswatches"><input name="swatch_color" value="Cherry Red"  type="radio"><img src="https://dummyimage.com/32/ff0000/fff" class="full swatch-img" alt="Cherry Red" title="Cherry Red" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Irish Green"  type="radio"><img src="https://dummyimage.com/32/2fff00/fff" class="full swatch-img" alt="Irish Green" title="Irish Green" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Jade Dome" type="radio"><img src="https://dummyimage.com/32/1e7d07/1e7d07" class="full swatch-img" alt="Jade Dome" title="Jade Dome" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Orange"  type="radio"><img src="https://dummyimage.com/32/e69410/e69410" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32"></label></li>
</ul>
<h2 id="colorselected"></h2>

Open in new window


My CSS

ul.swatch-colors li{float:left;margin:5px;padding:0;width:32px;height:32px}
.swatch-colors  li .swatch-img{cursor:pointer;display:block}
label.lbswatches > input{visibility:hidden;position: absolute;}
label.lbswatches > input + img{cursor:pointer;border:2px solid transparent;}
label.lbswatches > input:checked + img{border:2px solid #f00;}

Open in new window


and my JS to set the radio button as checked when a image is clicked.

        $('#thumbnails1').delegate('img','click', function(){
	       $(this).prev().attr('checked',true);
	   });

Open in new window


Thanks and appreciate it
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can do the image bit without JavaScript / jQuery by moving your markup around a bit
CSS
<style type="text/css">
ul.swatch-colors {
  list-style: none;
}
ul.swatch-colors li{
  display:inline-block;
  margin:5px;
  padding:0;
  width:32px;
  height:32px
}
.swatch-colors li .swatch-img {
  cursor:pointer;
  display:block;
}
input[type=radio] {
  display: none;
}
input:checked + label img {
  border:2px solid #00f;
}
</style>

Open in new window

HTML
<ul id="thumbnails1" class="noul swatch-colors">
  <li>
    <input name="swatch_color" value="Cherry Red" type="radio" id="cherry_red">
    <label for="cherry_red" class="lbswatches">
      <img src="https://dummyimage.com/32/ff0000/fff" class="full swatch-img" alt="Cherry Red" title="Cherry Red" width="32" height="32">
    </label>
  </li>
  <li>
    <input name="swatch_color" value="Irish Green" type="radio" id="irish_green">
    <label class="lbswatches" for="irish_green">
      <img src="https://dummyimage.com/32/2fff00/fff" class="full swatch-img" alt="Irish Green" title="Irish Green" width="32" height="32">
    </label>
  </li>
  <li>
    <input name="swatch_color" value="Jade Dome" type="radio" id="jade_dome">
    <label class="lbswatches" for="jade_dome">
      <img src="https://dummyimage.com/32/1e7d07/1e7d07" class="full swatch-img" alt="Jade Dome" title="Jade Dome" width="32" height="32">
    </label>
  </li>
  <li>
    <input name="swatch_color" value="Orange"  type="radio" id="orange">
    <label class="lbswatches" for="orange">
      <img src="https://dummyimage.com/32/e69410/e69410" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32">
    </label>
  </li>
</ul>
<h2 id="colorselected"></h2>

Open in new window

Working sample here

Author

Commented:
Thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial