I have a jsfiddle application here and I have a problem when it comes to displaying the radio buttons correctly.
If you open up the application you will see a set of radio buttons on top. Please select one of the radio buttons and then after that click on the “Add Radio Buttons” Button to add the radio buttons below in a table row. Now the problem is:
-
first of all the word “Multiple” does not appear in the table row for the second radio button. This should appear.
-
second of all it does not check the radio button I have selected on top. E.g If I have selected “Single” on top, when I add a new row, it should check the radio button for “Single” in the new row.
-
finally, I can select a radio button in the table row but if I do this then the selection of one of the radio buttons on top becomes unchecked. This shouldn’t happen.
If I check a radio button in one of the table rows, it should not have any affect on the radio bottoms at the top.
How can these problems be fixed?
That is because you are creating new input radio buttons but not giving them unique names. And also to retain the checked status you have to first find the checked element from the top radio buttons and set it for the newly created radio buttons.
I have fixed all the 3 issues which have mentioned take a look in the working demo.
Demo