SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: [help] Option Box select
-
May 3, 2007, 00:05 #1
- Join Date
- Mar 2005
- Location
- South Africa
- Posts
- 202
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
[help] Option Box select
I am not very familiar with JavaScript and I'm not sure if what I need uses JS. But let me ask anyway.
I have a form with "option boxes" and next to each option box I have an image. When you click on a specific image it will "select" the corresponding option box.
(It has to be a radio option box. I CANT use a checkbox)
I hope this problem is clear, Is there a way of doing this? I would be so grateful for any help or tips!Last edited by csj; May 3, 2007 at 01:24.
-
May 3, 2007, 01:54 #2
- Join Date
- Jul 2006
- Location
- Thailand
- Posts
- 162
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No, JavaScript is not needed. Use label!
<input type="radio" id="radio1" ...... /> <label for="radio1"><img ........ /></label>
-
May 3, 2007, 02:23 #3
- Join Date
- Mar 2005
- Location
- South Africa
- Posts
- 202
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the reply!
I'm not sure how the label thing works? How do I now click on the image so it selects the radio button?
-
May 3, 2007, 02:35 #4
- Join Date
- Mar 2005
- Location
- South Africa
- Posts
- 202
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is this function available for images? Doesn't it only work for text?
-
May 3, 2007, 20:58 #5
- Join Date
- Jul 2006
- Location
- Thailand
- Posts
- 162
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!-- So here is the radio box... I specify its ID. --> <input type="radio" id="radioone" /> <!-- And this label is for the input with id "radioone". --> <label for="radioone"><img src="-ARTICLES-IMAGES-/windows3.jpg" alt="..." /></label> <!-- So clicking on it means clicking the radio. />
-
May 3, 2007, 21:45 #6
- Join Date
- Aug 2006
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<script type="text/javascript"> window.onload = function (){ var el, i = 0; while(el = document.getElementsByName('imgname')[i++]){ el.onclick = function() {this.previousSibling.checked= true;} } } </script> <input type="radio" name="radioname" id="rad0" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=29384&dateline=1077457902"><br> <input type="radio" name="radioname" id="rad1" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180"><br> <input type="radio" name="radioname" id="rad2" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=136457&dateline=1177766790"><br>
Last edited by muazzez; May 7, 2007 at 08:20.
-
May 4, 2007, 04:09 #7
- Join Date
- Oct 2002
- Location
- Scotland
- Posts
- 3,631
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
-
May 7, 2007, 04:51 #8
- Join Date
- Mar 2005
- Location
- South Africa
- Posts
- 202
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the replies!! I sorted this problem out by just using a simple onclick function on the pic.
Bookmarks