View Full Version : select a radiobutton by clicking an image

08-28-2006, 04:58 PM
I have a form that shows some images with a radio button associated with each one. I would like to give them the option to click on the image to select the radio, but not sure the easiest way to pull it off.

I was assuming I add a OnClick to each image and use getelementbyid to check the button, but since all the radiobuttons have the same id (so they can only choose one) I am not sure how to make the correct radiobutton become checked.

Hope this makes sense, here is the simplified sample form:
<img src="image1.gif" />
<input id="radiobutton" type="radio" value="Image1" />
<img src="image2.gif" />
<input id="radiobutton" type="radio" value="Image2" />
<img src="image3.gif" />
<input id="radiobutton" type="radio" value="Image3" />
<img src="image4.gif" />
<input id="radiobutton" type="radio" value="Image4" />


08-28-2006, 05:26 PM
They should not have a same id...id is a sigular thing, they should have a name which can repeat.

An example is there are 1000 of Erics, but only one with my social security number.

to select it,

document.forms[0].radioName[1].checked = true;


08-28-2006, 05:45 PM
:eek: What was I thinking!


Here is the code I cooked up with your help in case anyone wants it for future use:
<script language="JavaScript" type="text/javascript">
function Selector(num)
// Function that will check radio
document.form1.Image[num].checked = true;
<form name="form1" id="form1" action="thankyou.asp" method="post">
<a href="#" onclick="Selector(0);"><img src="Image1.gif" width="150" height="106" /></a>
<input name="Image" id="Image1" type="radio" value="Image1" />
<a href="#" onclick="Selector(1);"><img src="Image2.gif" width="150" height="106" /></a>
<input name="Image" id="Image2" type="radio" value="Image2" />
<a href="#" onclick="Selector(2);"><img src="Image3.gif" width="150" height="106" /></a>
<input name="Image" id="Image3" type="radio" value="Image3" />
<a href="#" onclick="Selector(3);"><img src="Image4.gif" width="150" height="106" /></a>
<input name="Image" id="Image4" type="radio" value="Image4" />