Link to home
Start Free TrialLog in
Avatar of Tammu

asked on

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="" 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="" 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="" 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="" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32"></label></li>
<h2 id="colorselected"></h2>

Open in new window

My CSS 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(){

Open in new window

Thanks and appreciate it
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tammu


You are welcome.