• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

How do I make the image labels for a radio button clickable?

I have a simple table and form element set up with two radio buttons, and two Yes and No buttons next to each radio button.  I would like to have the whole area of the image "clickable" to check the radio button.  Open to any HTML, JavaScript, or CSS solutions :-).
<form ><table width="188" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20"><input type="radio" name="radio" id="radio1" value="radio"></td>
    <td width="168"><img src="images/yes.gif" width="168" height="52" alt=""></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio" id="radio2" value="radio"></td>
    <td><img src="images/no.gif" width="168" height="44" alt=""></td>
  </tr>
</table></form>

Open in new window

0
maeve100
Asked:
maeve100
1 Solution
 
Ionut A. TudorPHP ProgrammerCommented:
using js see below example:
<html>
<head>
<script type="text/javascript">
function radiocheck(id) { 
      document.getElementById(id).checked=true;
}
</script>
</head>
<form ><table width="188" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20"><input type="radio" name="radio" id="radio1" value="radio"></td>
    <td width="168"><img src="images/yes.gif" width="168" height="52" alt="" onclick="radiocheck('radio1');"></td>
  </tr>
  <tr>
    <td><input type="radio" name="radio" id="radio2" value="radio"></td>
    <td><img src="images/no.gif" width="168" height="44" alt="" onclick="radiocheck('radio2');"></td>
  </tr>
</table></form>
 
 
</body>
</html>

Open in new window

0
 
maeve100Author Commented:
Perfect, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now