[jQuery] jQuery with HTML radio button forms

Hi,
I have a problem running a simple jQuery script. This is what I'd like
to do:

- Select from a list of radio button
- Each radio button will show a hidden dropdown list

The jQuery snippet I use is as follows:

$("#wrapper_almond").hide();

$("#flavors input[name=cakes]").click(function(){

if ($("#almond_cake:checked").val() == 'on') {
$("#wrapper_almond").show();

} else {
$("#wrapper_almond").hide();

};

});

And the HTML I use is as follows:

<fieldset id="flavors">
<input type="radio" id="almond_cake" name="cakes" /></input>
<label >Almond Cake - White cake baked with freshly toasted
almonds</label>
</fieldset>

<div id="wrapper_almond">
<div align="left">Almond Cake Fillings:</div></td>
<div align="left"><input type="hidden" name="on2" value="Cake
Filling" />
<select name="os2" id="os2" onchange="updatetotal()">
<option value="Almond cream" selected="selected">Almond cream</
option>
</select>
</div>
</div>

Now the problem is anytime I insert a value="x" into the <input> type,
the jQuery ceases to work. For example:

<input type="radio" id="almond_cake" name="cakes" values="x" /></
input>

Is there a way around this? Thanks!