Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2003
    Thanked 0 Times in 0 Posts

    select a radiobutton by clicking an image

    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" />


  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Between DC and Baltimore In a Cave
    Thanked 94 Times in 88 Posts
    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;

    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jan 2003
    Thanked 0 Times in 0 Posts
    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" />


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts