Make text of (some) labels blue when clicked on

Printable View

02-28-2012, 07:00 AM
W8 4me

Make text of (some) labels blue when clicked on

Hi all,

I'm trying to find the best way to change (some) of my label's text to the colour blue when the associated radio button is checked.

However, when another radio button is checked within the same category, the other label's text (within that same category) should go back to the page's standard text colour.

I am restricted because I need to make this work in IE7, therefore the CSS :focus selector doesn't work.

So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working:

Code:

<script type="text/javascript"> function blueme() { this.style.color='blue'; } </script> ... <label>Type of vehicle:</label> <label onfocus="blueme()"><input type="radio" name="vehicle" value="Car" /> Car</label> <label onfocus="blueme()"><input type="radio" name="vehicle" value="Motorcycle" /> Motorcycle</label> <label onfocus="blueme()"><input type="radio" name="vehicle" value="Bicycle" /> Bicycle</label> <p></p> <label>Type of fuel:</label> <label onfocus="blueme()"><input type="radio" name="fuel" value="Petrol" /> Petrol</label> <label onfocus="blueme()"><input type="radio" name="fuel" value="Diesel" /> Diesel</label> <label onfocus="blueme()"><input type="radio" name="fuel" value="Cabbage" /> Cabbage</label>

thanks guys
02-28-2012, 07:42 AM
vwphillips

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <script type="text/javascript"> function blueme(lable) { var frm=lable.form,ip=lable.getElementsByTagName('INPUT')[0],rads,z0=0; if (ip){ rads=frm[ip.name]; for (;z0<rads.length;z0++){ rads[z0].parentNode.style.color=rads[z0]==ip?'blue':'black'; } } } </script> </head> <body> <form> <label>Type of vehicle:</label> <label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Car" /> Car</label> <label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Motorcycle" /> Motorcycle</label> <label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Bicycle" /> Bicycle</label> <p></p> <label>Type of fuel:</label> <label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Petrol" /> Petrol</label> <label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Diesel" /> Diesel</label> <label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Cabbage" /> Cabbage</label> </form> </body> </html>
11-17-2012, 11:38 AM
joyee

"So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working"

Also desperate to know how to fix this problem.
11-18-2012, 11:51 AM
W8 4me

Quote:

Originally Posted by joyee

"So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working"

Also desperate to know how to fix this problem.

Code:

function blueme(lable) { var frm=lable.form,ip=lable.getElementsByTagName('INPUT')[0],rads,z0=0; if (ip){ rads=frm[ip.name]; for (;z0<rads.length;z0++){ rads[z0].parentNode.style.color=rads[z0]==ip?'blue':'black'; } } }

then...

Code:

<label onmouseup="blueme(this)"> <input type="radio" name="TypeOfVehicle" value="Car" /> Car </label> <label onmouseup="blueme(this)"> <input type="radio" name="TypeOfVehicle" value="Motorcycle" /> Motorcycle</label> </label> ... <label onmouseup="blueme(this)"> <input type="radio" name="TypeOfFuel" value="Petrol" /> Petrol </label> <label onmouseup="blueme(this)"> <input type="radio" name="TypeOfFuel" value="Diesel" /> Diesel </label>