获取动态定义的、选中的单选按钮的属性

Question

问了很多类似的问题，但我还是想不通。

我有一组动态定义的单选按钮（按钮的数量和它们的标签都会改变）。

我只需要获取与选中的单选按钮关联的标签和编号。我该怎么做？

我做了一个 JS fiddle 显示，当我点击任何按钮时，选中的单选按钮是 "undefined"。这是代码：

$(document).ready(function() {
  var myArray = ["never", "sometimes", "always"];

  for (i = 0; i < myArray.length; i++) {
    addradiobutton("radio", i + 1, label = myArray[i]);
  }

  function addradiobutton(type, number, text) {
    var label = document.createElement("label");

    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", number);
    element.setAttribute("name", type);
    element.setAttribute("id", "radio_" + number);

    label.appendChild(element);
    label.innerHTML += text;

    var foo = document.getElementById("questionAnswerRadio");
    //Append the element in page (in span).
    foo.appendChild(label);
  }

  $("#questionAnswerRadio").click(function(event) {
    var currentSlideResult = 0;
    currentSlideResult.answerChosen = $("#questionAnswerRadio :radio:checked + label").text();
    currentSlideResult.numberChosen = $("#questionAnswerRadio :radio:checked + value").text();
    alert(currentSlideResult.answerChosen)
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionAnswerRadio"></div>

Answer 1

在事件处理程序中使用 $(this) 获取单击的单选按钮的值和标签
将空对象赋值给变量currentSlideResult
要获取与单选按钮关联的标签，请使用 $(this).parent().text()
在广播中使用 change 事件而不是 click
可以直接将数组元素传给函数，不需要赋值给变量再传给变量
要创建新元素和附加元素，您可以使用 jQuery

Demo

$(document).ready(function() {
  var myArray = ["never", "sometimes", "always"];

  for (i = 0; i < myArray.length; i++) {
    addradiobutton("radio", i + 1, myArray[i]);
  }

  function addradiobutton(type, number, text) {
    var input = $('<input />')
      .attr({
        type: type,
        value: number,
        name: type,
        id: 'radio_' + number
      });

    $('<label />')
      .text(text)
      .prepend(input)
      .appendTo('#questionAnswerRadio');
  }

  $("#questionAnswerRadio").on('change', ':radio', function(event) {
    var currentSlideResult = {};
    currentSlideResult.answerChosen = $(this).parent().text();
    currentSlideResult.numberChosen = $(this).val();
    alert(currentSlideResult.answerChosen);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questionAnswerRadio"></div>

获取动态定义的、选中的单选按钮的属性

Get properties of dynamically-defined, checked radio button

javascript

jquery

dynamic

radio-button