Image displays when clicked with multiple radio button groups
- by Jean
I'm creating a form that has seven different selection groups, most with radio buttons (ie: buns, cheese), a couple with check boxes (toppings). I need jQuery to differentiate the groups and display images when clicked. The value can't be part of the code as I use it as part of the php form in the next page.
<html>
<head>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="myRadioGroup">
<input type="radio" name="cars" value="American" />Yellow American<br />
<input type="radio" name="cars" value="Swiss" />Jarlsberg Swiss<br />
<input type="radio" name="cars" value="Blue" />Blue<br />
<input type="radio" name="cars" value="Cheddar" />Aged Cheddar<br />
<div id="American" class="desc"><img class="item" src="images/american-cheese-slice.png"></div>
<div id="Swiss" class="desc"><img class="item" src="images/swisscheese.png"></div>
<div id="Blue" class="desc"><img class="item" src="images/bluecheese.png"></div>
<div id="Cheddar" class="desc"><img class="item" src="images/agedcheddar.png"></div>
</div>
<div id="myBunGroup">
<input type="radio" name="buns" value="Whole Wheat" />Whole Wheat<br />
<input type="radio" name="buns" value="Classic" />Classic<br />
<input type="radio" name="buns" value="Gluten Free" />Gluten Free<br />
<input type="radio" name="buns" value="Wrap" />Wrap<br />
<div id="WholeWheat" class="desc"><img class="item" src="images/wholewheat.png"></div>
<div id="Classic" class="desc"><img class="item" src="images/classic.png"></div>
<div id="GlutenFree" class="desc"><img class="item" src="images/gf-buns.png"></div>
<div id="Wrap" class="desc"><img class="item" src="images/tortilla.png"></div>
</div>
<div id="myToppingGroup">
</div>
<!-- http://stackoverflow.com/questions/5940963/jquery-show-and-hide-divs-based-on-radio-button-click -->
<script>
$(document).ready(function() {
$(".item").hide();
$("input[name$="['cars', 'buns']"]").click(function() {
var test = $(this).val();
$(".item").hide();
$("#" + test).show();
});
});
</script>
</body>
</html>
