Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

MouseOver and Onclick radiobox simulation

Simulate radio buttons with colors



1:09 am on Jan 8, 2010 (gmt 0)

5+ Year Member

I would like to simulate radio button functionality, but without radio buttons.

<table border=0>
<td OnMouseOver="this.style.backgroundColor='green';" onMouseOut="this.style.backgroundColor='#FFFFFF';">MONEY COMING IN</td>
<td onMouseOver="this.style.backgroundColor='red';" onMouseOut="this.style.backgroundColor='#FFFFFF';">MONEY GOING OUT</td>

When I click MONEY-IN, the MONEY-IN should become and remain green, till I submit the form, or till I click MONEY-OUT. If I click MONEY-OUT, the background of MONEY-IN should be resetted, and MONEY-OUT should become red.

The initial state should be both white.

When I submit the form, I would like to be able to see the state of my fake radio buttons of course.

Additionaly it would be nice to get always an inverted background when I do a MouseOver. So the unselected MONEY-OUT will become red on a MouseOver, the selected MONEY-OUT will become white on a MouseOver.


10:17 pm on Feb 18, 2010 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome to WebmasterWorld, kajje!

When I simulate form actions using non-form elements, I usually setup a hidden element to contain the actual value. That makes it available when the form is submitted.

In this case, you could do something like:

function toggleMoney(choice){
if(choice == 'in'){
} else {
document.getElementById('moneyChoice').value = choice;

And then refactor your html like so:

<input type="hidden" name="moneyChoice" id="moneyChoice" value="" />
<table border=0>
<td id="moneyIn" onclick="toggleMoney('in');">MONEY COMING IN</td>
<td id="moneyOut" onclick="toggleMoney('out');">MONEY GOING OUT</td>


4:12 am on Feb 19, 2010 (gmt 0)

5+ Year Member

Thanks Gregg,

Not only for giving me the solution but also for the small variable container 'detour'.

Your approach was a little different on my various attempts, but it makes much much more sense like this!

The fool-proof wizard for staff inputs on our intranet gets a lot more visual with this one!


Featured Threads

Hot Threads This Week

Hot Threads This Month