2

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....

1
  • Hard to understand what you want, when you end your sentences half way. Oct 22, 2011 at 13:52

2 Answers 2

2

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

1
  • Hi Max, thanks for your response... But it is allowing me to move forward even if i do not select radio button.
    – Exception
    Oct 22, 2011 at 14:15
1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.