Exclusively Selectable Radio Buttons

**sagrav** · 08-08-2008, 12:26 PM

Hi there,

I am just getting started so this is a very basic problem.
Have managed to get most of the way to solving my problem with the help of some code on this past post:
http://www.dynamicdrive.com/forums/a...p/t-17232.html

Basically, the last issue I need to solve is to make the three radio buttons exclusively selectable (only one may be selected at any one time).

This is the code I have:

=========================================================

<html>
<head>

<script type="text/javascript">
onload=function(){
document.getElementById('accept').checked=false;
}

</script>

</head>

<body>

<table border="1">

<tr>
<td width="100" height="25"><input type="radio" id="accept" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown1').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 1</td>

<td width="100" height="25"><input type="radio" id="accept" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown2').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 2</td>

<td width="100" height="25"><input type="radio" id="accept" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown3').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 3</td>
</tr>

<tr>
<td width="300" height="25" colspan="3"><div id="dropdown1" style="display:none">Display Content 1</div><div id="dropdown2"
style="display:none">Display Content 2</div><div id="dropdown3" style="display:none">Display Content 3</div></td>
</tr>

</table>

</body>
</html>

=========================================================

Any help will be greatly appreciated.

Thanks!

**Nile** · 08-08-2008, 01:10 PM

This should do it:

HTML Code:

<html>
<head>

<script type="text/javascript">
onload=function(){
document.getElementById('accept').checked=false;
}

</script>

</head>

<body>

<table border="1">

<tr>
<td width="100" height="25"><input type="radio" id="accept" name="page" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown1').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 1</td>

<td width="100" height="25"><input type="radio" id="accept" name="page" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown2').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 2</td>

<td width="100" height="25"><input type="radio" id="accept" name="page" onclick="this.ticked=this.ticked? 0 : 1;
document.getElementById('dropdown3').style.display =this.ticked? 'block' : 'none';this.checked=this.ticked;">Option 3</td>
</tr>

<tr>
<td width="300" height="25" colspan="3"><div id="dropdown1" style="display:none">Display Content 1</div><div id="dropdown2"
style="display:none">Display Content 2</div><div id="dropdown3" style="display:none">Display Content 3</div></td>
</tr>

</table>

</body>
</html>

**sagrav** · 08-08-2008, 01:49 PM

Thanks Nile, that does work.

Having selected one of the radio buttons, the relevant content is displayed below. Should you then select another button, does not remove the previous content displayed. Any ideas on how to accomplish that?

Thanks,

**jscheuer1** · 08-08-2008, 02:47 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#displayarea div {
display:none;
}
</style>

<script type="text/javascript">
window.onload=function(){
for (var i = 2; i > -1; --i)
document.getElementById('accept' + i).checked=false;
}
function clearReveal(id){
var a = document.getElementById('displayarea').getElementsByTagName('div');
for (var i = a.length - 1; i > -1; --i)
a[i].style.display = 'none';
document.getElementById(id).style.display = 'block'
}
</script>

</head>

<body>

<table border="1">

<tr>
<td width="100" height="25"><input type="radio" id="accept0" name="page" onclick="clearReveal('dropdown1');">Option 1</td>

<td width="100" height="25"><input type="radio" id="accept1" name="page" onclick="clearReveal('dropdown2');">Option 2</td>

<td width="100" height="25"><input type="radio" id="accept2" name="page" onclick="clearReveal('dropdown3');">Option 3</td>
</tr>

<tr>
<td width="300" height="25" colspan="3" id="displayarea"><div id="dropdown1">Display Content 1</div><div id="dropdown2" 
>Display Content 2</div><div id="dropdown3">Display Content 3</div></td>
</tr>

</table>

</body>
</html>

**sagrav** · 08-08-2008, 03:01 PM

John - thanks very much for the help - much appreciated.

(learning all the time)

Thread: Exclusively Selectable Radio Buttons

Thread Tools

Search Thread

Exclusively Selectable Radio Buttons

Bookmarks

Bookmarks

Posting Permissions