www.webdeveloper.com
Results 1 to 4 of 4

Thread: Make text of (some) labels blue when clicked on

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

    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
    Last edited by W8 4me; 02-28-2012 at 07:02 AM.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2012
    Posts
    4
    "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.

  4. #4
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Quote Originally Posted by joyee View Post
    "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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles