使用 jQuery 插入带标签的收音机

Question

我创建了一个 JS 测验，它在数组中包含所有答案选项。然后将答案选项插入到创建的 <input type="radio" . . . . /> 元素中。然而，选项不是在标签内，而是单独保存在输入元素内。这里进一步扩展我在说什么：

我想要这样

这是创建输入的代码：

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
    radioList.append(item);
    }
    return radioList;
  }

如有任何帮助，我们将不胜感激。

Answer 1

标签应该真正包含最佳做法的单选按钮。试试这个：

// Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    for (var i = 0; i < questions[index].choices.length; i++) {
      var item = $('<li>');
      var label = $('<label>');
      var input = $('<input>', {type: 'radio', name: 'answer', value: i});
      input.appendTo(label);
      label.append(questions[index].choices[i]);
      item.append(label);
      radioList.append(item);
    }
    return radioList;
  }

使用 jQuery 插入带标签的收音机

Insert radio with label using jQuery

html

javascript

jquery

input

radio