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');
});