/    Sign up×
Community /Pin to ProfileBookmark

click on button to select radio

Copy linkTweet thisAlerts:
Jun 12.2005

hi, i’m trying to click on an image to select a radio button associated with that image. I have 200 images each within a radio button set, beside beingable to click on the radio button for selection, i thought it would be easier for the users to just click on the image to make the radio button selected, this is what i have so far which isn’t working, any ideas?

<form name=”frm1″>
<input type=”radio” value=”r1″ id=”r1″><a href=”this.frm1.r1.selected”><img border=”0″ src=”2black.jpg”></a>

thanks

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@karayanJun 12.2005 — Maybe this will work:

<form name="frm1">

<input type="radio" value="r1" id="r1"><a href="#top" onclick="this.frm1.r1.selected=true;return false;"><img border="0" src="2black.jpg"></a>
Copy linkTweet thisAlerts:
@VladdyJun 12.2005 — Before getting into scripting it is a good idea to become proficient in HTML:

http://www.w3.org/TR/html4/interact/forms.html#h-17.9

- that applies to both posters above
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 12.2005 — In real browsers this would be as easy as &lt;label&gt;&lt;input type="radio" value="r1" name="r1"&gt;&lt;img
alt="" src="2black.jpg"&gt;&lt;/label&gt; but you probably want to support IE, too. &lt;label onclick="this.firstChild.checked=true"&gt;&lt;input
type="radio" value="r1" name="r1"&gt;&lt;img alt="" src="2black.jpg"&gt;&lt;/label&gt;
Copy linkTweet thisAlerts:
@haveyauthorJun 12.2005 — thanks! Orc Scorcher - Crown of Chaos
Copy linkTweet thisAlerts:
@haveyauthorJun 12.2005 — I've been trying to work around the error for IE of Object Expected, clicking on the image selects the radio button perfectly, another words it works fine in IE, but it displays error.

Any suggestions
Copy linkTweet thisAlerts:
@felgallJun 12.2005 — The following works without needing Javascript.

&lt;label for="r1"&gt;&lt;input type="radio" value="r1" name="r" id="r1"&gt;&lt;img
alt="" src="2black.jpg"&gt;&lt;/label&gt;
Copy linkTweet thisAlerts:
@jeffy777Sep 04.2005 — The following works without needing Javascript.

&lt;label for="r1"&gt;&lt;input type="radio" value="r1" name="r" id="r1"&gt;&lt;img
alt="" src="2black.jpg"&gt;&lt;/label&gt;[/QUOTE]

It doesn't seem to work in IE inless you use text instead of the image. Any way around that? I'd really like to implement this into a site.

EDIT: I found a fix that works in both IE and Firefox: put the image and radio button in a table cell and when the cell is clicked the radio is selected:

[code=php]<td onclick="document.getElementById ('r1').checked=true" width="100%"><img src="test.jpg""><br><input type="radio" id="r1" name="id2" value="2" ></td>[/code]
Copy linkTweet thisAlerts:
@jeffy777Sep 05.2005 — Is there a way to make the table cell have a black border if the radio button in that cell is selected?

EDIT: I found an answer again:

[code=php]<td onclick="document.getElementById ('r1').checked=true; this.style.border='2px solid #000000';" width="100%"><img src="test.jpg"><br><input type="radio" id="r1" name ="id2" value="2" ></td>[/code]

If the cell is clicked, then the radio button is selected and a black border is drawn.

EDIT: the only problem with this is that the border remains when you click a different cell. Can someone help me to hae the border only appear around the cell that contains the selected radio button?
×

Success!

Help @havey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...