Member Avatar for farahphp

Hi All
i want to develop a code such that when i click on the text next to the radio button the radio button should be selected and even if the button is clicked
how can i achieve this
any help would b appriciated
thanks in advance

<html>
	<head>
		<script language="Javascript">

     </script>
</head>
<body>
<table>
<tr>
      		<td width="4%" valign="top" align="left"><font face="Times New Roman" size="3"
          color="#000000">1.</font></td>
      		<td width="30%" valign="top" align="left" nowrap><font face="Times New Roman" size="3"
          color="#000000">Select an option</font></td>
      		<td width="73%" valign="top" align="left">
	 			<input type="radio" name="grp" value="Yes" tabindex="1">Yes
	  			<input type="radio" name="grp" value="No" tabindex="1">No</td>
    		</tr>
</table>
</body>
</html>
  • 6 Contributors
  • 8 Replies
  • 2K Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by mnjbadc
Member Avatar for o0DarkEvil0o

Code bellow should help you, good luck!

<html>
	<head>
		<script language="Javascript">

     </script>
<script>
function selectrd(id)
{
	var opt=(id==1)?"yes":"no";
	var tg=document.getElementById("rd" + opt);
	tg.checked=true;
}
</script>
</head>
<body>
<table>
<tr>
      		<td width="4%" valign="top" align="left"><font face="Times New Roman" size="3"
          color="#000000">1.</font></td>
      		<td width="30%" valign="top" align="left" nowrap><font face="Times New Roman" size="3"
          color="#000000">Select an option</font></td>
      		<td width="73%" valign="top" align="left">
	 			<input id="rdyes" type="radio" name="grp" value="Yes" tabindex="1">Yes
	  			<input id="rdno" type="radio" name="grp" value="No" tabindex="1">No</td>
    		</tr>
</table>
<label onclick="selectrd(1)">Select Yes</label> | 
<label onclick="selectrd(2)">Select No</label> 

</body>
</html>
Member Avatar for ~s.o.s~

> i want to develop a code such that when i click on the text next to the radio button the radio
> button should be selected and even if the button is clicked
You don't need Javascript for this; use the HTML label tag.

<p>Try clicking on the text labels:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>
Member Avatar for mnjbadc

There is a potential problem relying on the html label solution above: I am trying to set up a list of buttons using javascript to highlight the selected option.

<span onClick = "jfsw(2,la,10);">
<input type="radio" name="cruts21t" id="19111920" value="19111920" />
<label class="radio" id="cruts21tb" for="19111920">1911-1920</label>
</span>

In the above, the javascript function jfsw highlights the label when the input or label is clicked on. The problem is that firefox 2.0.0.13 leaves a small space between the input symbol and the label. Clicking on this space activates the javascript but does not select the corresponding radio button. Internet Explorer appears not to have this problem.

Can the format of the label be made to change when the button is checked without using javascript?

Member Avatar for langsor

This is how I would do it

<p>Try clicking on the text labels:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>
Member Avatar for langsor

<span onClick = "jfsw(2,la,10);">
<input type="radio" name="cruts21t" id="19111920" value="19111920" />
<label class="radio" id="cruts21tb" for="19111920">1911-1920</label>
</span>

In the above, the javascript function jfsw highlights the label when the input or label is clicked on. The problem is that firefox 2.0.0.13 leaves a small space between the input symbol and the label. Clicking on this space activates the javascript but does not select the corresponding radio button. Internet Explorer appears not to have this problem.

Can the format of the label be made to change when the button is checked without using javascript?

<span onClick = "jfsw(2,la,10);">
<input type="radio" name="cruts21t" id="19111920" value="19111920" /><label class="radio" id="cruts21tb" for="19111920">1911-1920</label>
</span>

Try that ... the newline is interpreted as a space-character between the radio and the label

...

Member Avatar for mnjbadc

Thanks Langsor, that reduces the gap, but does not eliminate it. With Firefox rendering, there is also a small area beneath the input button, but inside the enclosing span, which does not change the selection.

Member Avatar for nikesh.yadav

use this only a little change

add lable

<label><input type="radio" name="grp" value="Yes" tabindex="1">Yes</label>

Member Avatar for mnjbadc

Thanks Nikesh, that solves the problem!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.