[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!