[jQuery] modifying a label when radio input selected
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
<div id="searchLabels">
<input type="radio" value="" id="entireSite" selected="selected"
name="cat">
<label for="entireSite" class="selected" id="labelEntireSite">Entire
Site</label>
<input type="radio" value="recipes" id="recipesCat" name="cat">
<label for="recipesCat" id="labelRecipesCat">Recipes</label>
</div>
If I click on the recipes label (id="recipesCat") I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
(input[@selected="selected"]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve