Creating a radio button list on the fly

Question

I almost have this working but one thing I cant quite figure out: What I'm trying to do is create a radio button list on the fly. However, when I do this it creates a radio box each time so all my answers can be selected. How can I create one input, that has 4 options so that I can only select one instead of them all?

function questionAnswers() {
  let arr = Object.values(questionList[i].answers)
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

radios are grouped by name. Assign the same name to all of them... — Jonas Wilms, Jun 06 '17 at 16:29
This [example](https://stackoverflow.com/questions/28543752/multiple-radio-button-groups-in-one-form) would be handy — lilixiaocc, Jun 06 '17 at 16:33

Jonas Wilms · Accepted Answer · 2017-06-06T16:39:07.857

0

Assigning the same name to two or more radios groups them:

function questionAnswers() {
  let arr = ["shark","tiger","lion"];
  let answerSection=document.body;
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    checkbox.name="animal";
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

window.onload=questionAnswers;

If you have multiple radios, you may assign random names, like:

var randname=""+Math.floor(Math.random()*10000);

edited Jun 06 '17 at 16:39

answered Jun 06 '17 at 16:33

Jonas Wilms

132,000
20
149
151

as far as I can see you only added in this line: `checkbox.name="animal";` I have now done this and it works. can you explain why? – The worm Jun 06 '17 at 20:51
@Theworm *Assigning the same name to two or more radios groups them* – Jonas Wilms Jun 07 '17 at 12:15

score 0 · Answer 2 · answered Jun 06 '17 at 16:33

Give same name to all the radio buttons.

function questionAnswers() {
  let arr = Object.values(questionList[i].answers)
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    checkbox.name = "myradio";
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

Creating a radio button list on the fly

2 Answers2