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

Dani AI

Generated

is spot on: use labels, not JavaScript. To also fix the tiny dead zone noticed in Firefox, wrap each radio and its text inside a single label. That makes the entire label area clickable, so there is no gap between the control and the text. It also improves keyboard and screen reader support.

Here is a minimal, CSS-only pattern that highlights the chosen option and is easy to click or tap anywhere on the label.

<form>
  <fieldset class="group">
    <legend>Select an option</legend>

    <label class="choice">
      <input type="radio" name="grp" value="Yes">
      <span>Yes</span>
    </label>

    <label class="choice">
      <input type="radio" name="grp" value="No">
      <span>No</span>
    </label>
  </fieldset>
</form>
.group { border: 0; padding: 0; margin: 0; }
.choice {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .5rem; cursor: pointer; user-select: none;
}
.choice input { margin: 0; vertical-align: middle; }
.choice input:focus-visible + span {
  outline: 2px solid #2684ff; outline-offset: 2px; border-radius: 3px;
}
.choice input:checked + span {
  background: #eef6ff; border-radius: 3px;
}

Notes and quick fixes:

  • If you do not want to wrap, place the label immediately after the input and remove whitespace between them, or set label { display: inline-block; } and input { vertical-align: middle; } to avoid click gaps (@langsor was on the right track there).
  • Do not give multiple controls the same tabindex="1". Let the natural tab order work; it is more accessible and predictable.
  • If you keep the table layout, you can still wrap each radio and its text with a label inside the same cell.

Recommended Answers

All 8 Replies

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 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 Member #380484

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 Member #380484

<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 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.