Changing Form with Radio Buttons

zixserro

New Member
I've got a form that I'm trying to create, and I want it to change based on what radio buttons are selected at the start:

MU4UYRH.png


I want it to work as follows:

If nothing is selected, none of the Divs are visible.
If Item 1 is selected, only Div 1 appears.
If Items 2, 3, or 4 are selected, Divs 1, 2, and 3 all appear.
If Item 5 is selected, only Div 3 appears.
If Item 6 is selected, none of the Divs appear.

I've gotten as far as 'if nothing is selected, none of the Divs are visible', but making certain Divs appear when certain radio buttons are selected isn't working for me like I feel that it should. I tried doing something in jQuery (the highest-rated answer to this question, since it does work in the sample), but it didn't work for some reason. Any idea why it wouldn't work, and what I can do to make it work?
 

ronaldroe

Super Moderator
Staff member
I did something just like this on Codepen a while ago: http://codepen.io/ronaldroe/pen/GyrEF

It's pretty simple, and I commented it pretty well.

Essentially, instead of trying to find out which one is checked, we just react to it being clicked. Give each div/input "pair" an identical class, and use that to control which is displayed. You could retool this to do what you're wanting pretty easily.
 
Last edited:
Top