Question

I have a form that has a radio button set. When the page loads, I want use some simple scripting that immediately apply a classname to the label of the corresponding input and when the user click on another radio button in the set to remove that class and apply the classname to the newly selected radio button label.

Any ideas how this can be done?

JSFiddle: http://jsfiddle.net/eYDV4/

<form id="myForm" action="" method="post">
   <input type="radio" id="radio1" name="myRadio" value="radio1">
   <label for="radio1">radio1</label>
   <input type="radio" id="radio2" name="myRadio" value="radio2">
   <label for="radio2">radio2</label>
   <input type="radio" id="radio3" name="myRadio" value="radio3" checked="checked">
   <label for="radio3">radio3</label>
   <input type="radio" id="radio4" name="myRadio" value="radio4">
   <label for="radio4">radio4</label>
</form>

Answer 1

You have already been given an excellent CSS-only answer, but here’s an alternative using jQuery:

$(document).ready(function() {
   $("input[type='radio']:checked").next("label").addClass("newClass");
   $("input[type='radio']").click(function() {
       $("label").removeClass("newClass");
       $(this).next("label").addClass("newClass"); 
   }); 
});

If you need to support IE6, I would suggest using the jQuery method as CSS attribute selectors and adjacent sibling selectors are not supported.

Here’s a working example of the above code.