Log in

View Full Version : 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


<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
cell.className = "off2";Is this defined?

font-size: 10ptpts are designed for use on printable media, and can be highly variable onscreen.

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.