samedi 7 mars 2015

Show/Hide div based on combination of selected radio buttons

So I'm working on a website and have no clue where to start for the jquery.


There are 2 forms, one with 2 radio buttons, and the other with 5 radio buttons. There are 10 different combinations of shirts and pants that can be shown, but only one at a time depending on the combination of radio buttons they have selected.


So lets say that shirt 1 is red and shirt 2 is blue. Pants 1 is red, pants 2 is blue, pants 3 is green, and so on.


So img11.jpg would be a red shirt and red pants.


Img12.jpg is going to be red shirt and blue pants.


img21.jpg is blue shirt and red pants.


Img23.jpg is blue shirt and green pants.


(I've included a diagram to show this better)!


And so on and so forth. Anyone have any good links or would like to help make this possible?


I don't have much (if any) experience in javascript or jQuery, but here is my HTML:



<form>
<input type="radio" id="shirt_Red" name="shirt" value="Red" />
<input type="radio" id="shirt_Blue" name="shirt" value="Blue" />
</form

<form>
<input type="radio" id="pants_Red" name="pants" value="Red" />
<input type="radio" id="pants_Blue" name="pants" value="Blue" />
<input type="radio" id="pants_Green" name="pants" value="Green" />
<input type="radio" id="pants_Purple" name="pants" value="Purple" />
<input type="radio" id="pants_Pink" name="pants" value="Pink" />
</form>


I'm not even sure if I would use image tags or a background for a div to do this, depending on how it works out with the jQuery or javascript. Thanks!


Aucun commentaire:

Enregistrer un commentaire