CODEWITHSUNDEEP
javascriptjquery
Exception
Exception

Reputation: 8379

Change DIV content one after another on button click if the radio button inside that DIV is checked

Please help me on this, I am in the middle and can't proceed further as my code is inefficient and not getting idea...
I have a array of codes as given below.. 

     var codes=[["header1","<input type='radio'>","option2","option3"],["header2","<input type='radio'>","option5","option6"],["header3","<input type='radio'>","option8","option9"]];

Else please check this fiddle to check my progress...
http://jsfiddle.net/FgVGR/1/
In my HTML i will have 3 DIV tags

  DIV(class name="headerHolder") -- This is to hold header text from the array.
  DIV(class name="optionHolder") -- This contains the options related to each header displayed(Options will be next to the header element[index 0]).
  DIV Options contains options and radio button. 
  DIV(class name="navigation") with next button with ID "next" and back button with id "back".

Basically the DIV will be displayed with the first array elements, i.e Header1 in headerHolder and radio button, option2 and Option 3 in optionHolder DIV.If radio button is clicked and clicked next button the next array element i.e starting with header2 will be displayed in headerHolder and optionHolder. Checking radio button is qualification to move to the next array. If back button is clicked previous array items to the current array should be displayed with the previous given radio button response...Options in optionHolder should be displayed in two columns. Currently i am using tag but unable to display..
Please help me on this...This is what i am trying to do....

Upvotes: 2

Views: 785

Answers (2)

Kevin M
Kevin M

Reputation: 1574

As I understand - Each forward click you want to test if your radio is checked. If checked continue forward.

To do this I would assign a common id or class to all of the radio buttons (or one to the parent container and access the radios through the parents child elements).

Then on each #next click check the checked property of the radio. If checked continue if not checked return.

Here is a quick and dirty. You grab the optionHolder. Then its children li elements. Then the radio. Next we alert its checked status.

var radio = $("#optionHolder").children("li").children("input[type=radio]");
alert(radio.is(':checked'));

Check this out. check radio buttons and fields to enable link

Upvotes: 1

Max Allan
Max Allan

Reputation: 640

Try this jsFiddle. This is working as I think you want it to?

Upvotes: 2

Related Questions