html nested radio buttons

Question

i have 4 radio button(a,b,c,d).when i click radio button a, there would be another 2 option which is a1 and ab.and also..when i click on radio button d there is the same output d1 and d2..and if i choose d2..another radio 2 button appear..how to do that?thanks..i really need this..if possible can u give me the coding?``

Answer 1

You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:

<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple

<input type="radio" id="extra1" style="visibility:hidden" other choice here />

<input type="radio" id="extra2" style="visibility:hidden" other choice here />

Answer 2

If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.

Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.

Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D