Avatar of niceoneishere
niceoneishere
 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="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
CSSjQueryHTML

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
niceoneishere

ASKER
Thanks
Julian Hansen

You are welcome.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck