Log in

View Full Version : 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/archive/index.php/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>
<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
<!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)