[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 326
  • 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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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