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

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
LVL 2
niceoneishereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
niceoneishereAuthor Commented:
Thanks
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.