Hide/Show html with a checkbox

dan18088

09-22-2002, 04:20 AM

Can anyone give me the script to hide or show html based on a checkbox value? I have a working drop down box but that only allows the users to choose one item. Below is the code I am trying to modify.

function fnShowForm(){
switch( document.getElementById('Purchase').selectedIndex ){
case 0:
//Hide all others by using the same line below
//but replace the element name and change inline to none
document.getElementById('CellPhone').style.display = 'none';
document.getElementById('Desktop').style.display = 'none';
document.getElementById('Laptop').style.display = 'none';
document.getElementById('Software/Accessories').style.display = 'none';
break;
case 1:
document.getElementById('CellPhone').style.display = 'inline';
document.getElementById('Desktop').style.display = 'none';
document.getElementById('Laptop').style.display = 'none';
document.getElementById('Software/Accessories').style.display = 'none';
break;
case 2:
document.getElementById('CellPhone').style.display = 'none';
document.getElementById('Desktop').style.display = 'inline';
document.getElementById('Laptop').style.display = 'none';
document.getElementById('Software/Accessories').style.display = 'none';
break;
case 3:
document.getElementById('CellPhone').style.display = 'none';
document.getElementById('Desktop').style.display = 'none';
document.getElementById('Laptop').style.display = 'inline';
document.getElementById('Software/Accessories').style.display = 'none';
break;
case 4:
document.getElementById('CellPhone').style.display = 'none';
document.getElementById('Desktop').style.display = 'none';
document.getElementById('Laptop').style.display = 'none';
document.getElementById('Software/Accessories').style.display = 'inline';
break;

}

Thanks,
Dan

Mr J

09-22-2002, 01:11 PM

See if this is any good for you.

I have used radio buttons because I thought that if you only want to select one out of a choice then these are what you use.

Checkboxes allow for mulitple choice

<SCRIPT language="JavaScript">

</SCRIPT>

<form name="f1">
<input type="radio" name="r1" onclick="Hmm()">
<input type="radio" name="r1" onclick="Hmm()">
<input type="radio" name="r1" onclick="Hmm()">
<input type="radio" name="r1" onclick="Hmm()">
<input type="radio" name="r1" onclick="Hmm()">
</form>

<P id="display"></p>

adios

09-23-2002, 05:45 AM

Maybe this'll help:

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) : null;
}

function showProduct(box) {
el = getElement(box.value);
if (el) el.style.display = (box.checked) ? '' : 'none';
}

</script>
</head>
<body>
<table>
<tr>
<td width="200" height="140">
<form>
<input type="checkbox" name="showProd" value="CellPhone"
onclick="showProduct(this)"> cell phones<br>
<input type="checkbox" name="showProd" value="Desktop"
onclick="showProduct(this)"> desktops<br>
<input type="checkbox" name="showProd" value="Laptop"
onclick="showProduct(this)"> laptops<br>
<input type="checkbox" name="toggleProds" value="Software/Accessories"
onclick="showProduct(this)"> software and accessories<br>
</form>
</td><td>
<img id="CellPhone" align="middle" style="display:none;border:3px silver double;"
src="http://www.clipartgallery.com/business/cellphone.gif">
<img id="Desktop" align="middle" style="display:none;border:3px silver double;"
src="http://www.dell.com/images/us/segments/dhs/prodviews/dimen_2300_series.jpg">
<img id="Laptop" align="middle" style="display:none;border:3px silver double;"
src="http://www.dell.com/images/us/segments/dhs/prodviews/x200_series.jpg">
<img id="Software/Accessories" align="middle" style="display:none;border:3px silver double;"
src="http://www.compusa.com/product_images/images/small/94/286294.gif">
</td></tr></table>
</body>
</html>

dan18088

09-23-2002, 11:51 PM

Your script worked just fine, works great for my company order form!