•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 425,820 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,004 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2640 | Replies: 8 | Solved
 |
•
•
Join Date: Mar 2008
Posts: 12
Reputation: 
Rep Power: 1
Solved Threads: 0
Newbie Poster
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
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>
•
•
Join Date: May 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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> http://boy.us.com/ - Multi Utilities Site
•
•
Join Date: Jun 2006
Location: India
Posts: 6,855
Reputation: 
Rep Power: 23
Solved Threads: 344
> 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.
> 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>
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Aug 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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.
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>
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?
Last edited by Tekmaven : Aug 12th, 2008 at 4:56 am. Reason: Code tags
•
•
Join Date: Aug 2008
Posts: 374
Reputation:
Rep Power: 1
Solved Threads: 34
Posting Whiz
This is how I would do it
•
•
•
•
Originally Posted by ~s.o.s~ 
<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>
•
•
Join Date: Aug 2008
Posts: 374
Reputation:
Rep Power: 1
Solved Threads: 34
Posting Whiz
•
•
•
•
Originally Posted by mnjbadc
<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
...
•
•
Join Date: Aug 2008
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
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.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Radiobutton Problem (ASP.NET)
- Firefox Compatibility help with script (JavaScript / DHTML / AJAX)
- Shortcuts (Windows tips 'n' tweaks)
- Cannot Test For Condition (C#)
- Help - surf sidekick 3 is attacking! (Viruses, Spyware and other Nasties)
- retrieving ids from dynamically created controls in asp.net (ASP)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: advanced search operation, need help
- Next Thread: Change href of links linking to external page
