In Jquery, how can I change a css style or change a class to the label of a radio button when this radio button is checked?

advertisements

I have a bunch of radiobuttons in a group and each radio button has its own label:

<label>
<input type="radio" class="lstradio" name="photonum" value="4" id="photonum_1" />
4</label>

I also have the css for these labels that work with the hover:

label {
font-family: sans-serif;
font-size: 20px;

}
label:hover {
background-color: #FF6;
}

My question: How do I switch the css style or class of the label when my radio button input is checked, using jQuery?

Here is the scenario:

In each fieldset there are a number of radio buttons, idea is to change the css style ONLY for the label of the radio button that is checked in each of these fieldsets...

Perhaps I need to fiddle with the blur() function?

Here is the sample: http://jsfiddle.net/ykK2s/2/


You can just do it in label on click().

$('label').click(function(){
    $('label').removeClass('checked');
    $(this).addClass('checked');
});

Check this http://jsfiddle.net/Eunpt/

EDIT: The <span>s complicate a little bit the thing but this will work:

$('label').click(function(){
    $(this).parents('fieldset').find('label').removeClass('radiochecked');
    $(this).addClass('radiochecked');
});

Look http://jsfiddle.net/ykK2s/4/