/    Sign up×
Community /Pin to ProfileBookmark

Clear radio button values when checkbox unchecked

Copy linkTweet thisAlerts:
Mar 23.2006

I am creating a list of areas in town. When the checkbox beside an area is checked, a show/hide layer appears asking if you want: a vertical ad or a horizontal ad (two radio buttons).

Is there a way to clear the radio buttons if the checkbox is unchecked?

to post a comment
JavaScript

16 Comments(s) ↴

Copy linkTweet thisAlerts:
@hyperliskMar 23.2006 — <i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script language="JavaScript"&gt;
&lt;!--
function doCheck(checkbox){

if(! checkbox.checked){

<i> </i>myForm.theRadios[0].checked=false;
<i> </i>myForm.theRadios[1].checked=false;
<i> </i>// Put your hide layer code here.

} else {

<i> </i>// Put your show layer code here.

}

}
// --&gt;
&lt;/script&gt;
&lt;body&gt;
&lt;form name="myForm"&gt;
&lt;input type=checkbox onClick="doCheck(this);"&gt; Checkbox &lt;br&gt;
&lt;input type=radio name="theRadios"&gt; Radio Button #1 &lt;br&gt;
&lt;input type=radio name="theRadios"&gt; Radio Button #2
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — Wow, you are fast. I was just returning to the forum to include my source code. Can you show me how to add your code to this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>

<!-- Begin

// quick browser tests

var ns4 = (document.layers) ? true : false;

var ie4 = (document.all && !document.getElementById) ? true : false;

var ie5 = (document.all && document.getElementById) ? true : false;

var ns6 = (!document.all && document.getElementById) ? true : false;

function show(sw,obj) {

// show/hide the divisions

if (sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';

if (!sw && (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';

if (sw && ns4) document.layers[obj].visibility = 'visible';

if (!sw && ns4) document.layers[obj].visibility = 'hidden';

}

// End -->

</script>

<style type="text/css">

<!--

.myLayersClass {

position: relative;

visibility: hidden;

width: 326px;

height: 19px;

}

//-->

</style>

</head>

<body>

<div id="div4" align="left">

<form action="" method="post" name="myForm">

<table width="600" cellspacing="6">

<tr>

<td valign="top"><input name="checkbox" type="checkbox" onClick="show(true,'div1');" value="Show Div 1">

Montrose
<!--<input type=button value="Hide Div 1" onClick="show(false,'div1');">-->
</td>
<td valign="top"><div id = "div1" class = "myLayersClass">
<label>
<input type="radio" name="Montrose" value="Montrose_Vertical">
Vertical

&nbsp;&nbsp;&nbsp;<input type="radio" name="Montrose" value="Montrose_Horizontal">

Horizontal&nbsp;</label>

<br>

</div></td>

<td>&nbsp;</td>

</tr>

<tr>

<td><input name="checkbox" type="checkbox" id="checkbox" onClick="show(true,'div2');" value="Show Div 2">

Bellaire </td>

<td><div id = "div2" class = "myLayersClass">

<label>

<input type="radio" name="Bellaire" value="Bellaire_Vertical">

Vertical </label>

<br>

</div></td>

<td>&nbsp;</td>

</tr>

</table>

</form>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@hyperliskMar 23.2006 — Here you go. However, when I run it in Firefox, it doesn't seem to work... It works alright in IE though.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;

&lt;script&gt;
&lt;!-- Begin
// quick browser tests
var ns4 = (document.layers) ? true : false;
var ie4 = (document.all &amp;&amp; !document.getElementById) ? true : false;
var ie5 = (document.all &amp;&amp; document.getElementById) ? true : false;
var ns6 = (!document.all &amp;&amp; document.getElementById) ? true : false;

function show(sw,obj) {
// show/hide the divisions
if (sw &amp;&amp; (ie4 || ie5) ) document.all[obj].style.visibility = 'visible';
if (!sw &amp;&amp; (ie4 || ie5) ) document.all[obj].style.visibility = 'hidden';
if (sw &amp;&amp; ns4) document.layers[obj].visibility = 'visible';
if (!sw &amp;&amp; ns4) document.layers[obj].visibility = 'hidden';
}

function check(checkbox,radioButton){

if(! checkbox.checked){

<i> </i>if(radioButton=='Montrose'){
<i> </i> myForm.Montrose[0].checked = false;
<i> </i> myForm.Montrose[1].checked = false;
<i> </i>} else {
<i> </i> myForm.Bellaire.checked = false;
<i> </i>}

}

}


// End --&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
&lt;!--
.myLayersClass {
position: relative;
visibility: hidden;
width: 326px;
height: 19px;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="div4" align="left"&gt;
&lt;form action="" method="post" name="myForm"&gt;
&lt;table width="600" cellspacing="6"&gt;
&lt;tr&gt;
&lt;td valign="top"&gt;&lt;input name="checkbox" type="checkbox" onClick="show(true,'div1');check(this,'Montrose');" value="Show Div 1"&gt;

Montrose
&lt;!--&lt;input type=button value="Hide Div 1" onClick="show(false,'div1');"&gt;--&gt;
&lt;/td&gt;
&lt;td valign="top"&gt;&lt;div id="div1" class="myLayersClass"&gt;
&lt;label&gt;
&lt;input type="radio" name="Montrose" value="Montrose_Vertical"&gt;
Vertical
&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type="radio" name="Montrose" value="Montrose_Horizontal"&gt;
Horizontal&amp;nbsp;&lt;/label&gt;
&lt;br&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input name="checkbox" type="checkbox" id="checkbox" onClick="show(true,'div2');check(this,'Bellaire');" value="Show Div 2"&gt;
Bellaire &lt;/td&gt;
&lt;td&gt;&lt;div id="div2" class="myLayersClass"&gt;
&lt;label&gt;
&lt;input type="radio" name="Bellaire" value="Bellaire_Vertical"&gt;
Vertical &lt;/label&gt;
&lt;br&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;

&lt;/table&gt;
&lt;/form&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — Many thanks. I appreciate it. I'll add the rest of the areas and see how I do...
Copy linkTweet thisAlerts:
@hyperliskMar 23.2006 — When you add the other ones, change this:
<i>
</i>function check(checkbox,radioButton){

if(! checkbox.checked){

<i> </i>if(radioButton=='Montrose'){
<i> </i> myForm.Montrose[0].checked = false;
<i> </i> myForm.Montrose[1].checked = false;
<i> </i>} else {
<i> </i> myForm.Bellaire.checked = false;
<i> </i>}

}

}

to a series of if-else if statements, or use a switch statement.
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — [CODE]<html>
<head>
<script type="text/javascript">

function toggle(nBox,nDiv,nGroup){

if (nBox.checked)
{document.getElementById(nDiv).style.display = ''}
else {
document.getElementById(nDiv).style.display = 'none';
nRadio = document.getElementsByName(nGroup);
for (i=0; i<nRadio.length; i++)
{nRadio[i].checked = false}
}
}

function init(){

var lastDiv = 3;
for (i=1; i<lastDiv+1; i++)
{document.getElementById('div'+i).style.display = 'none'}
}

onload=init;

</script>
</head>
<body>

<form action="" method="post" name="myForm">
<table width="400" cellspacing="6" cellpadding="5" border="0">
<tbody>
<tr>
<td><input type="checkbox" onclick="toggle(this,'div1','Montrose')">Montrose</td>
<td>
<div id='div1'>
<input type="radio" name="Montrose" value="Montrose_Vertical">Vertical
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="Montrose" value="Montrose_Horizontal">Horizontal
</div>
</td>
</tr>

<tr>
<td><input type="checkbox" onclick="toggle(this,'div2','Bellaire')">Bellaire</td>
<td>
<div id='div2'>
<input type="radio" name="Bellaire" value="Montrose_Vertical">Vertical
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="Bellaire" value="Montrose_Horizontal">Horizontal
</div>
</td>
</tr>

<tr>
<td><input type="checkbox" onclick="toggle(this,'div3','Nowhere')">Nowhere</td>
<td>
<div id='div3'>
<input type="radio" name="Nowhere" value="Nowhere_Vertical">Vertical
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="Nowhere" value="Nowhere_Horizontal">Horizontal
</div>
</td>
</tr>

</tbody>
</table>
</form>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — Many thanks, James. I have 17 areas to enter and I was not able to keep things working with hyperlisk's code. I know it worked great, but in my simpledon, I could not get there. The day is looking up....
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — You're welcome. Take care.
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — One question... the zip codes fall into various categories within an area. So I have a heading for the area, then under that heading, I have the various categories as line items. Can I show/hide the various categories under each of the headings and NOT screw up the show/hide/clear already in place?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript">

function toggle(nBox,nDiv,nGroup){

if (nBox.checked)
{document.getElementById(nDiv).style.display = ''}
else {
document.getElementById(nDiv).style.display = 'none';
nRadio = document.getElementsByName(nGroup);
for (i=0; i<nRadio.length; i++)
{nRadio[i].checked = false}
}
}

function init(){

var lastDiv = 16;
for (i=1; i<lastDiv+1; i++)
{document.getElementById('div'+i).style.display = 'none'}
}

onload=init;

</script>

</head>

<body>

<form action="" method="post" name="myForm">

<table width="428" cellspacing="2" cellpadding="2" border="0">

<tbody>

<tr>

<td colspan="3"><font color="#cc0033">HOUSTON</font></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div2','Bellaire')">

<acronym title="Bellaire">Bellaire</acronym>

</td>

<td valign="top">

<div id='div2'><span class="zipcodes">

<input type="radio" name="Bellaire" value="Bellaire_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77081 | 77401</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div4','Briargrove')">

<acronym title="Briargrove and Uptown">Briargrove</acronym>

</td>

<td valign="top">

<div id='div4'><span class="zipcodes">

<input type="radio" name="Briargrove" value="Briargrove_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="Briargrove" value="Briargrove_Horizontal">

Horizontal </span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77057</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div5','Downtown')">

<acronym title="Downtown, Midtown and Heights">Downtown</acronym>

</td>

<td valign="top"><div id='div5'><span class="zipcodes">

<input type="radio" name="Downtown" value="Downtown_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="Downtown" value="Downtown_Horizontal">

Horizontal</span> </div></td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2" valign="top"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77002

| 77003 | 77009 | 77010 | 77097</span> </td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div6','Galleria')">

<acronym title="Galleria, Tanglewood and Uptown">Galleria</acronym> </td>

<td valign="top">

<div id='div6'><span class="zipcodes">

<input type="radio" name="Galleria" value="Galleria_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77056</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div7','Memorial')">

<acronym title="Addicks, Energy Corridor, Memorial, and West Houston">Memorial</acronym></td>

<td valign="top">

<div id='div7'><span class="zipcodes">

<input type="radio" name="Memorial" value="Memorial_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77077 | 77079</span></td>

</tr>

<tr>

<td width="10">&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div1','Montrose')"><acronym title="Boulevard Oaks, Midtown, Montrose, River Oaks and Upper Kirby">Montrose</acronym>

</td>

<td width="258" valign="top">

<div id='div1'><span class="zipcodes">

<input type="radio" name="Montrose" value="Montrose_Vertical">Vertical

&nbsp;&nbsp;

<input type="radio" name="Montrose" value="Montrose_Horizontal">Horizontal</span>

</div>

</td>

</tr>


<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77006 | 77098</span> </td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div3','RiverOaks')">

<acronym title="Montrose, River Oaks and Upper Kirby">River Oaks</acronym>

</td>

<td valign="top">

<div id='div3'>

<span class="zipcodes"><input type="radio" name="RiverOaks" value="RiverOaks_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77019 | 77098</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div8','Tanglewood')">

<acronym title="Galleria, Tanglewood and Uptown">Tanglewood</acronym></td>

<td valign="top">

<div id='div8'> <span class="zipcodes">

<input type="radio" name="Tanglewood" value="Tanglewood_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77056</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type="checkbox" onclick="toggle(this,'div12','EnergyCorridor')">

<acronym title="Energy Corridor, Memorial and West Houston">West Houston</acronym></td>

<td valign="top">

<div id='div12'><span class="zipcodes">

<input type="radio" name="EnergyCorridor" value="EnergyCorridor_Vertical">

Vertical only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77077</span></td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div9','WestU')">

<acronym title="West University Place">West U</acronym></td>

<td width="258" valign="top">

<div id='div9'><span class="zipcodes">

<input type="radio" name="WestU" value="WestU_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="WestU" value="WestU_Horizontal">

Horizontal</span> </div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77006 | 77098</span> </td>

</tr>

<tr>

<td colspan="3"><font color="#cc0033">NORTHWEST</font></td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div15','Champions')">

<acronym title="Champions">Champions</acronym></td>

<td width="258" valign="top">

<div id='div15'><span class="zipcodes">

<input type="radio" name="Champions" value="Champions_Horizontal">

Horizontal only</span></div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77069</span> </td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div10','Coles')">

<acronym title="Coles Crossing and Cypress">Coles Crossing</acronym></td>

<td width="258" valign="top">

<div id='div10'><span class="zipcodes">

<input type="radio" name="Coles" value="Coles_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="Coles" value="Coles_Horizontal">

Horizontal</span> </div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77429</span> </td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div14','Cypress')">

<acronym title="Coles Crossing, Cypress and Fairfield">Cypress</acronym></td>

<td width="258" valign="top">

<div id='div14'><span class="zipcodes">

<input type="radio" name="Cypress" value="Cypress_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="Cypress" value="Cypress_Horizontal">
Horizontal</span> </div>
</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77429 | 77433</span></td>

</tr>

<tr>

<td colspan="3"><font color="#CC0033">WEST/KATY</font></td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div11','CincoRanch')">

<acronym title="Cinco Ranch, Grand Lakes and Katy">Cinco Ranch</acronym></td>

<td width="258" valign="top">

<div id='div11'><span class="zipcodes">

<input type="radio" name="CincoRanch" value="CincoRanch_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="CincoRanch" value="CincoRanch_Horizontal">

Horizontal</span> </div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77494</span> </td>

</tr>

<tr>

<td colspan="3"><font color="#CC0033">NORTH/MONTGOMERY</font></td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div13','Woodlands')">

<acronym title="Oak Ridge North, Shenandoah and The Woodlands">The Woodlands</acronym></td>

<td width="258" valign="top">

<div id='div13'><span class="zipcodes">

<input type="radio" name="Woodlands" value="Woodlands_Vertical">

Vertical &nbsp;&nbsp;

<input type="radio" name="Woodlands" value="Woodlands_Horizontal">

Horizontal</span> </div>

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td colspan="2"><span class="zipcodes">&nbsp;&nbsp;&nbsp;77380 | 77381 | 77382</span> </td>

</tr>

<tr>

<td colspan="3">SW/FORT BEND</td>

</tr>

<tr>

<td>&nbsp;</td>

<td width="140"><input type="checkbox" onclick="toggle(this,'div16','Sugarland')">

<acronym title="First Colony, Greatwood and Sugar Land">Sugar Land</acronym></td>

<td width="258" valign="top">

<div id='div16'><span class="zipcodes">

<input type="radio" name="Sugarland" value="Sugarland_Horizontal">

Horizontal only</span></div>

</td>

</tr>

</table>

</form>

</body>

</html>
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — I'll take a look, but, you know, it helps a lot if you use the code tags when posting code. It's the # on menu bar. And it helps a lot to state the WHOLE problem from the start, and not piecemeal it. And it really helps to address everyone by name.
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — another question...

With the current code as included in my previous thread, when I unclick an area checkbox, it deletes the values in that area's radio buttons and hides them. Is it possible to have this occur based on the radio button's id instead of its name? I need the name field for database purposes.
Copy linkTweet thisAlerts:
@isakauthorMar 23.2006 — so sorry, James.
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — Did you read my last post?
Copy linkTweet thisAlerts:
@James_GatkaMar 23.2006 — I no idea what you mean. If you need the name, use it. This is all I'm going to do. I give up. You don't even put the divs in numerical order. And you won't use the script tags. This is a nightmare and I quit.

[CODE]<html>
<head>
<script type="text/javascript">

function toggle(nBox,nDiv,nGroup){

if (nBox.checked)
{
document.getElementById(nDiv).style.display = '';
document.getElementById(nDiv+'zip').style.display = '';
}
else {
document.getElementById(nDiv).style.display = 'none';
document.getElementById(nDiv+'zip').style.display = 'none';
nRadio = document.getElementsByName(nGroup);
for (i=0; i<nRadio.length; i++)
{nRadio[i].checked = false}}
}

function init(){

var lastDiv = 16;
for (i=1; i<lastDiv+1; i++)
{
document.getElementById('div'+i).style.display = 'none';
document.getElementById('div'+i+'zip').style.display = 'none';
}
}

onload=init;

</script>
</head>
<body>

<form action="" method="post" name="myForm">

<table width="428" cellspacing="2" cellpadding="2" border="0">
<tbody>
<tr>
<td colspan="3"><font color="#cc0033">HOUSTON</font></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>
<input type="checkbox" onclick="toggle(this,'div2','Bellaire')">
<acronym title="Bellaire">Bellaire</acronym>
</td>
<td valign="top">
<div id='div2'>
<span class="zipcodes">
<input type="radio" name="Bellaire" value="Bellaire_Vertical">
Vertical only</span>
</div>
</td>
</tr>

<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div2zip'>&nbsp;&nbsp;&nbsp;77081 | 77401</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div4','Briargrove')">
<acronym title="Briargrove and Uptown">Briargrove</acronym>
</td>
<td valign="top">
<div id='div4'><span class="zipcodes">
<input type="radio" name="Briargrove" value="Briargrove_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="Briargrove" value="Briargrove_Horizontal">
Horizontal </span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div4zip'>&nbsp;&nbsp;&nbsp;77057</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div5','Downtown')">
<acronym title="Downtown, Midtown and Heights">Downtown</acronym>
</td>
<td valign="top"><div id='div5'><span class="zipcodes">
<input type="radio" name="Downtown" value="Downtown_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="Downtown" value="Downtown_Horizontal">
Horizontal</span> </div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top"><span class="zipcodes" id='div5zip'> &nbsp;&nbsp;&nbsp;77002
| 77003 | 77009 | 77010 | 77097</span> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div6','Galleria')">
<acronym title="Galleria, Tanglewood and Uptown">Galleria</acronym> </td>
<td valign="top">
<div id='div6'><span class="zipcodes">
<input type="radio" name="Galleria" value="Galleria_Vertical">
Vertical only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div6zip'>&nbsp;&nbsp;&nbsp;77056</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div7','Memorial')">
<acronym title="Addicks, Energy Corridor, Memorial, and West Houston">Memorial</acronym></td>
<td valign="top">
<div id='div7'><span class="zipcodes">
<input type="radio" name="Memorial" value="Memorial_Vertical">
Vertical only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div7zip'>&nbsp;&nbsp;&nbsp;77077 | 77079</span></td>
</tr>
<tr>
<td width="10">&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div1','Montrose')"><acronym title="Boulevard Oaks, Midtown, Montrose, River Oaks and Upper Kirby">Montrose</acronym>
</td>
<td width="258" valign="top">
<div id='div1'><span class="zipcodes">
<input type="radio" name="Montrose" value="Montrose_Vertical">Vertical
&nbsp;&nbsp;
<input type="radio" name="Montrose" value="Montrose_Horizontal">Horizontal</span>
</div>
</td>
</tr>


<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div1zip' id='div1zip'>&nbsp;&nbsp;&nbsp;77006 | 77098</span> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div3','RiverOaks')">
<acronym title="Montrose, River Oaks and Upper Kirby">River Oaks</acronym>
</td>
<td valign="top">
<div id='div3'>
<span class="zipcodes"><input type="radio" name="RiverOaks" value="RiverOaks_Vertical">
Vertical only</span></div>
</td>
</tr>

<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div3zip'>&nbsp;&nbsp;&nbsp;77019 | 77098</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div8','Tanglewood')">
<acronym title="Galleria, Tanglewood and Uptown">Tanglewood</acronym></td>
<td valign="top">
<div id='div8'> <span class="zipcodes">
<input type="radio" name="Tanglewood" value="Tanglewood_Vertical">
Vertical only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div8zip'>&nbsp;&nbsp;&nbsp;77056</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" onclick="toggle(this,'div12','EnergyCorridor')">
<acronym title="Energy Corridor, Memorial and West Houston">West Houston</acronym></td>
<td valign="top">
<div id='div12'><span class="zipcodes">
<input type="radio" name="EnergyCorridor" value="EnergyCorridor_Vertical">
Vertical only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div12zip'>&nbsp;&nbsp;&nbsp;77077</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div9','WestU')">
<acronym title="West University Place">West U</acronym></td>
<td width="258" valign="top">
<div id='div9'><span class="zipcodes">
<input type="radio" name="WestU" value="WestU_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="WestU" value="WestU_Horizontal">
Horizontal</span> </div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div9zip'>&nbsp;&nbsp;&nbsp;77006 | 77098</span> </td>
</tr>
<tr>
<td colspan="3"><font color="#cc0033">NORTHWEST</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div15','Champions')">
<acronym title="Champions">Champions</acronym></td>
<td width="258" valign="top">
<div id='div15'><span class="zipcodes">
<input type="radio" name="Champions" value="Champions_Horizontal">
Horizontal only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div15zip'>&nbsp;&nbsp;&nbsp;77069</span> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div10','Coles')">
<acronym title="Coles Crossing and Cypress">Coles Crossing</acronym></td>
<td width="258" valign="top">
<div id='div10'><span class="zipcodes">
<input type="radio" name="Coles" value="Coles_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="Coles" value="Coles_Horizontal">
Horizontal</span> </div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div10zip'>&nbsp;&nbsp;&nbsp;77429</span> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div14','Cypress')">
<acronym title="Coles Crossing, Cypress and Fairfield">Cypress</acronym></td>
<td width="258" valign="top">
<div id='div14'><span class="zipcodes">
<input type="radio" name="Cypress" value="Cypress_Vertical">
Vertical &nbsp;&nbsp;

<input type="radio" name="Cypress" value="Cypress_Horizontal">
Horizontal</span> </div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div14zip'>&nbsp;&nbsp;&nbsp;77429 | 77433</span></td>
</tr>
<tr>
<td colspan="3"><font color="#CC0033">WEST/KATY</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div11','CincoRanch')">
<acronym title="Cinco Ranch, Grand Lakes and Katy">Cinco Ranch</acronym></td>
<td width="258" valign="top">
<div id='div11'><span class="zipcodes">
<input type="radio" name="CincoRanch" value="CincoRanch_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="CincoRanch" value="CincoRanch_Horizontal">
Horizontal</span> </div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div11zip'>&nbsp;&nbsp;&nbsp;77494</span> </td>
</tr>
<tr>
<td colspan="3"><font color="#CC0033">NORTH/MONTGOMERY</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div13','Woodlands')">
<acronym title="Oak Ridge North, Shenandoah and The Woodlands">The Woodlands</acronym></td>
<td width="258" valign="top">
<div id='div13'><span class="zipcodes">
<input type="radio" name="Woodlands" value="Woodlands_Vertical">
Vertical &nbsp;&nbsp;
<input type="radio" name="Woodlands" value="Woodlands_Horizontal">
Horizontal</span> </div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div13zip'>&nbsp;&nbsp;&nbsp;77380 | 77381 | 77382</span> </td>
</tr>
<tr>
<td colspan="3">SW/FORT BEND</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="140"><input type="checkbox" onclick="toggle(this,'div16','Sugarland')">
<acronym title="First Colony, Greatwood and Sugar Land">Sugar Land</acronym></td>
<td width="258" valign="top">
<div id='div16'><span class="zipcodes">
<input type="radio" name="Sugarland" value="Sugarland_Horizontal">
Horizontal only</span></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2"><span class="zipcodes" id='div16zip'>&nbsp;&nbsp;&nbsp;77380 | 77381 | 77382</span> </td>
</tr>
</tbody>
</table>
</form>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@isakauthorMar 24.2006 — Many thanks for all your help, James. There's a lot I do not understand, so I sought help on this forum. Your help has been tremendous.

If I need the name... don't know what you mean.

The divs are not in order because I changed the order of them after they were entered. I did not realize this mattered. Seems to test fine as is.

Script tags... I have script tags. Or so I thought.

Again, thanks. Your help has been tremendous in taking me into something I am unfamiliar with. Sorry to have frustrated you with my lack of understanding.
Copy linkTweet thisAlerts:
@James_GatkaMar 24.2006 — [CODE]Code tags when posting script.[/CODE]

The code is very difficult to read without code tags. You posted nearly 10,000 characters.

The CODE tag is the # on the toolbar. Please use it.

Putting the divs out of order made it very difficult to test/modify.

Good luck with whatever more you need to do.
×

Success!

Help @isak spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...