onclick radio button style

**bigboy99** · 04-14-2006, 01:14 AM

Hi Guys,

Absolute Javascript novice here looking for some guidance with a problem.

I am basically trying to change the style of a <span> area when I onclick a radio button. I have achieved this part however when I select another radio button the onlick style remains for the previously selected radipo button. I would like this style to go back to its orginal form once the user has clicked off the radio button. I have uploaded a page for you to see what I mean. All javascript and css is embedde into the page. Any help would be greatly appreciated.

http://www.smarthack.com/radiobutton.htm

Code:

<html>

<head>


<style type="text/css">

.off{
	border-style: solid;
border-collapse: seperate;
border-width: 1;
width: 170px;
border-color : #ffffff #ffffff #ffffff #ffffff;
background: #ffffff;
font-family: verdana; 
color: #000000;

}

.on { 
border-style: solid;
border-collapse: seperate;
border-width: 1;
width: 170px;
border-color : #4761A1 #000000 #000000 #4761A1;
background: #2C427A;
font-family: verdana; 
color: #ffffff;

}

</style>


<script type="text/javascript"> 
<!-- 
function toggle(box,theId) { 
if(document.getElementById) { 
var cell = document.getElementById(theId); 
if(box.checked) { 
cell.className = "on";  
} 
else { 
cell.className = "off2"; 
} 
} 
} 
// --> 
</script> 
</head>
<body>



<span class="off" id="DataCell">&nbsp;<input type="radio" name="v41" value=" " size="30" 

style="font-family: Verdana; font-size: 10pt" onclick="toggle(this,'DataCell')" 

checked>&nbsp;&nbsp;Everything</span><br>
<span class="off" id="DataCell1">&nbsp;<input type="radio" name="v41" value="and 

STK_FORM='VI'" size="30" style="font-family: Verdana; font-size: 10pt" 

onclick="toggle(this,'DataCell1')">&nbsp;&nbsp;AV Resources</span><br>
<span class="off" id="DataCell2">&nbsp;<input type="radio" name="v41" value="and 

STK_FORM='BK'" size="30" style="font-family: Verdana; font-size: 10pt" 

onclick="toggle(this,'DataCell2')">&nbsp;&nbsp;Books</span><br>
<span class="off" id="DataCell3">&nbsp;<input type="radio" name="v41" value="and 

STK_FORM='REA'" size="30" style="font-family: Verdana; font-size: 10pt" 

onclick="toggle(this,'DataCell3')">&nbsp;&nbsp;Equipment</span><br>
<span class="off" id="DataCell4">&nbsp;<input type="radio" name="v41" value="and 

STK_STATS_CODE='KIT'" size="30" style="font-family: Verdana; font-size: 10pt" 

onclick="toggle(this,'DataCell4')">&nbsp;&nbsp;Kits<br>



</body>
</html>

**Twey** · 04-14-2006, 01:34 PM

Code:

cell.className = "off2";

Is this defined?

Code:

font-size: 10pt

pts are designed for use on printable media, and can be highly variable onscreen.

Code:

value="and STK_FORM='VI'"

Nothing to do with your question, but this looks as if you're going to put that straight into an SQL query later. Don't. This is very open to SQL injection.

Thread: onclick radio button style

Thread Tools

Search Thread

onclick radio button style

Bookmarks

Bookmarks

Posting Permissions